Try changing this window.Vue = require('vue'); to window.Vue = require('vue').default;
Apr 25, 2021
6
Level 1
vue on Laravel 7.0 blocked after npm audit fix
Hi all, I'm working on a project with laravel 7.0 and vue . After I made a npm operation (npm audit fix) I begun to obtain a lot of problems with npm compiler. I solved those confilcts, now my npm compiles all, but my site is over with this message in the console: "Uncaught TypeError: Vue is not a constructor" What appens? I'm not able to solve it. This is some code: the webpack.mix.js
const mix = require('laravel-mix');
mix
.vue()
/* CSS */
.sass('resources/sass/main.scss', 'public/css/oneui.css')
.sass('resources/sass/oneui/themes/amethyst.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/city.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/flat.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/modern.scss', 'public/css/themes/')
.sass('resources/sass/oneui/themes/smooth.scss', 'public/css/themes/')
.sass('resources/sass/Documents/documents_layout.scss', 'public/css/') //scs custom per il layout base
.js('resources/js/Login/appLogin.js', 'public/js')
.js('resources/js/Template/appTemplate.js', 'public/js')
.js('resources/js/main/mainApp.js', 'public/js')
.js('resources/js/oneui/app.js', 'public/js/oneui.app.js')
.js('resources/js/Template/Appunti/appAppunti.js', 'public/js/appunti.app.js')
.options({
processCssUrls: false
});
and this is my mainApp.js
require('../bootstrap');
window.Vue = require('vue');
window.Vuex = require('vuex');
//PUNTO D'INGRESSO
Vue.component('main-component', require('./mainComponent.vue').default);
Vue.component('left-toolbar', require('./Left/leftToolbar.vue').default);
Vue.component('left-list', require('./Left/leftList.vue').default);
Vue.component('right-toolbar', require('./Right/rightToolbar.vue').default);
Vue.component('right-list', require('./Right/rightList.vue').default);
Vue.component('doc-adder', require('./Right/docAdder.vue').default);
Vue.component('wyswig', require('./Right/wyswig.vue').default);
Vue.component('icon', require('./Right/icon.vue').default);
Vue.component('allegati', require('./Right/allegati.vue').default);
export const EventBus = new Vue();
const app = new Vue({
el: '#app'
});
and this is my bootstrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
// Add a response interceptor
axios.interceptors.response.use(function (response) {
return response;
}, function (err) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
console.log('Errore intercettato',err.response);
console.log("guest:",guest);
if(err.response.status === 401 || err.response.status === 409 || err.response.status === 411){
if(!guest){
location.reload();
//return Promise.reject(err);
}
}
});
//avviamo un interceptor di sessione scaduta ... ogni 60 secondi interroga il backend
setInterval(function(){ axios.get("/getIfSessionIsValid")}, 60000);
// import Vue from vue;
window.Vue = require('vue');
window.Vuex = require('vuex');
//eventi
export const EventBus = new Vue();
May you help me please? What code can I insert in this post? Hi. Thanks
Level 29
2 likes
Please or to participate in this conversation.