2

He descargado un proyecto y lo estoy arreglando pero ahora que actualizo las dependencias me arroja uno de los siguientes errores.

introducir la descripción de la imagen aquí

My code: package.json:

"devDependencies": {
    "axios": "^0.20.0",
    "bootstrap": "4.5.2",
    "cross-env": "^7.0.2",
    "laravel-mix": "^5.0",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.26.10",
    "sass-loader": "^8.0.2",
    "sw-precache-webpack-plugin": "^1.0.0",
    "vue": "^2.6.12",
    "vue-template-compiler": "^2.6.12"
},
"dependencies": {
    "alertify.js": "^1.0.12",
    "braintree": "^2.24.0",
    "braintree-web": "^3.65.0",
    "braintree-web-drop-in": "^1.23.0",
    "chart.js": "^2.9.3",
    "child_process": "^1.0.2",
    "flowplayer": "^7.2.7",
    "font-awesome": "^4.7.0",
    "jquery": "^3.5.1",
    "jshint": "^2.12.0",
    "laravel-echo": "^1.8.1",
    "plyr": "^3.6.2",
    "pusher-js": "^7.0.0",
    "simplebar": "^5.2.1",
    "sweetalert": "^2.1.2",
    "tether": "^1.4.7",
    "v-tooltip": "^2.0.3",
    "vee-validate": "^3.3.9",
    "vue-carousel": "0.18.0",
    "vue-chartjs": "^3.5.1",
    "vue-color": "^2.7.1",
    "vue-cookie": "^1.1.4",
    "vue-coverflow": "^2.2.0",
    "vue-echo": "^1.0.2",
    "vue-i18n": "^8.21.0",
    "vue-progressbar": "^0.7.5",
    "vue-progressive-image": "^3.2.0",
    "vue-router": "^3.4.3",
    "vue2-editor": "^2.10.2",
    "vuejs-datepicker": "^1.6.2",
    "vuex": "^3.5.1"
},
"pre-commit": [
    "lint",
    "validate",
    "test"
]

webpack.mix.js:

let mix = require('laravel-mix');

mix.js('resources/assets/js/users/app.js', 'public/js')
   .js('resources/assets/js/admin/app.js', 'public/js/admin-js/')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .extract([
     'vue',
     'vuex',
     'vue-carousel',
     'vue-color',
     'vue-coverflow',
     'vue-echo',
     'vue-i18n',
     'vue-progressbar',
     'vue-router',
     'axios',
     'bootstrap',
     'plyr',
     'vee-validate',
     'jquery',
  ]).version();

  mix.autoload({
     jquery: ['$', 'window.jQuery', 'jQuery', 'window.$', 'jquery', 'window.jquery']
  });

  mix.webpackConfig({
     node: {
        fs: 'empty'
     }
  });

Body home app:

<body id="root">
  <div class="{{config('plugin.theme')}}"></div>
  <noscript>
    <div class="container"><div class="col-sm-6 col-sm-offset-3"><div class="alert alert-danger">JavaScript is disabled in your web browser!</div></div></div>
  </noscript>

  <script src="//npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
  <script src="{{ asset('js/app.js') }}"></script>
</body>

resources/assets/js/user/app.js:

require('../bootstrap');
import Vue from 'vue';
import Helper from './packages/Helper';
import VueProgressBar from 'vue-progressbar';
import store from './store/store.js';
import router from './packages/Routes';
import i18n from './packages/Language';
import Auth from './packages/Auth';
import Cloudfront from './packages/Cloudfront';
import VueProgressiveImage from 'vue-progressive-image';

Vue.use(Auth);
Vue.use(Cloudfront);
Vue.use(VueProgressiveImage);

// Get theme name to render a folder of theme
Vue.use(Helper);

let themeName = Vue.helper.current_theme();
let themePath = require('./views/' + themeName + '/app.vue');

axios.defaults.headers.common ['Authorization'] = 'Bearer ' + 
Vue.auth.getUserInfo('token');


const options = {
    color: '#03A9F4',
    failedColor: '#F44336',
    thickness: '3px',
    transition: {
        speed: '6s',
        opacity: '1',
        termination: 500
    },
    autoRevert: true,
    location: 'top',
    inverse: false
};

Vue.use(VueProgressBar, options);

/// If is not auth step
router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.userNotAuth)) {
        if(Vue.auth.isAuthenticated() == 'active') {
            next({
                path: '/app'
            });
        } else if (Vue.auth.isAuthenticated() == 'payment_step') {
            next({
                path: '/app/signup/payment'
            });

        } else{
            next();
        }
    } else if (to.matched.some(record => record.meta.allAuth)) {
        if(Vue.auth.isAuthenticated() == 'active') {
            next();
        } else if (Vue.auth.isAuthenticated() == 'payment_step') {
            next({
                path: '/app/signup/payment'
            });

        } else{
            next();
        }
    } else if (to.matched.some(record => record.meta.userAuth)) {
        if(Vue.auth.isAuthenticated() == 'active') {
            next();
        } else if (Vue.auth.isAuthenticated() == 'payment_step') {
            next({
                path: '/app/signup/payment'
             });

        } else {
            next('/app/login');
        }
     } else if  (to.matched.some(record => record.meta.userPaymentAuth)) {
        if(Vue.auth.isAuthenticated() == 'payment_step') {
            next();
        } else {
            next({
                path: '/app'

            });
        }
    } else {
        next(); // make sure to always call next()!
    }
});


router.beforeEach((to, from, next) => {
    if (!to.matched.length) {
        next('/app/404');
    } else {
        next();
    }
});


// Title
router.beforeEach((to, from, next) => {
// This goes through the matched routes from last to first, finding the closest route with a title.
// eg. if we have /some/deep/nested/route and /some, /deep, and /nested have titles, nested's will be chosen.
const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);

// Find the nearest route element with meta tags.
const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);

// If a route with a title was found, set the document (page) title to that value.
if(nearestWithTitle) document.title = nearestWithTitle.meta.title;

// Remove any stale meta tags from the document using the key attribute we set below.
Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));

// Skip rendering meta tags if there are none.
if(!nearestWithMeta) return next();

// Turn the meta tag definitions into actual elements in the head.
nearestWithMeta.meta.metaTags.map(tagDef => {
    const tag = document.createElement('meta');

    Object.keys(tagDef).forEach(key => {
        tag.setAttribute(key, tagDef[key]);
    });

    // We use this to track which meta tags we create, so we don't interfere with other ones.
    tag.setAttribute('data-vue-router-controlled', '');

    return tag;
})
// Add the meta tags to the document head.
    .forEach(tag => document.head.appendChild(tag));

 next();
});

new Vue({
  el: '#app' + themeName, //root
  i18n,
  store,
  router,
  render: h => h(themePath)
});

He probado algunas sugerencias de otras publicaciones como la de exportar en el paquete web pero me sale el mismo error, no sé qué más probar. Elimine la carpeta del módulo de nodo e instálelo nuevamente y esa tampoco es la solución. Agradecería mucho de su ayuda, ya que es un proyecto que quiero publicar.

0

2 respuestas 2

1
const app = new Vue({
    el: '#app'
});

Asi le indicas a vue en cual elemento va a renderizar el app. En este caso buscara un elemento que tenga el id #app

<body id="root">
  <div id="app" class="{{config('plugin.theme')}}"></div>
  <noscript>
    <div class="container"><div class="col-sm-6 col-sm-offset-3"><div class="alert alert-danger">JavaScript is disabled in your web browser!</div></div></div>
  </noscript>

  <script src="//npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
  <script src="{{ asset('js/app.js') }}"></script>
</body>
3
  • Sigue apareciendo el mismo error Commented el 2 sept. 2020 a las 15:04
  • Puedes poner el stack trace entero?
    – larizzatg
    Commented el 2 sept. 2020 a las 15:27
  • Me había equivocado por lo que ese no era el archivo del error. Pero ahora no me muestra las plantillas. Commented el 2 sept. 2020 a las 15:44
0

Replace all webpack resolve aliases with relative paths

I stubmled across an issue where the the webpack [chunkhash] placeholder in the output.chunkFilename webpack option causes an issue

Modifying webpack optimization.splitChunks.chunks option

const mix = require('laravel-mix');
const fs = require('fs');
const webpack = require('webpack');
const tailwind = require('tailwindcss');
const path = require('path');
const glob = require('glob');
const exec = require('child_process').exec;
const pwa = require('sw-precache-webpack-plugin');

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[name].js',
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
});

mix.version();

// ...

mix.js('resources/js/app/app.js', 'public/js/app.js');

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.