You need to show us your code that is causing the error.
Nov 5, 2018
7
Level 1
Uncaught TypeError: Cannot read property 'call' of undefined
I keep getting this error on the Javascript console and the page won't load, I'm using the mix to compile my styles and js into separate files, the problem persists when I run npm run production but it doesn't output any errors when I run npm run dev, what could be the cause?
Level 51
Level 1
Full error output:
manifest.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (manifest.js:55)
at Object.Zgw8 (popper.js:2519)
at __webpack_require__ (manifest.js:55)
at Object.sV/x (index.js:18)
at __webpack_require__ (manifest.js:55)
at Object.0 (RepuestosDestacadosBlog.vue:23)
at __webpack_require__ (manifest.js:55)
at webpackJsonpCallback (manifest.js:26)
at app.js:1
It's pointing to my vue component, I excluded it from app.js and it stills throws an error.
manifest.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (manifest.js:55)
at Object.Zgw8 (popper.js:2519)
at __webpack_require__ (manifest.js:55)
at Object.sV/x (index.js:18)
at __webpack_require__ (manifest.js:55)
at Object.0 (app.js:1)
at __webpack_require__ (manifest.js:55)
at webpackJsonpCallback (manifest.js:26)
at app.js:1
here's my app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
// BOOTSTRAP-VUE
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
// DIALOG
import VuejsDialog from "vuejs-dialog"
Vue.use(VuejsDialog)
// VEE VALIDATE
import VeeValidate from 'vee-validate';
import VeeValidateEs from 'vee-validate/dist/locale/es';
window.Vue.use(VeeValidate, {
locale: 'es',
dictionary:{
es: VeeValidateEs
}
});
import { Validator } from 'vee-validate';
import PhoneNumber from 'awesome-phonenumber'
const phoneNumber = {
getMessage: field => `El campo ${field} no contiene un número de teléfono válido`,
validate (value) {
return new Promise(resolve => {
let phone = new PhoneNumber(value);
resolve({ valid: phone.isValid() })
});
}
}
const dict = {
custom: {
emailInput: {
required: () => 'El campo Correo es requerido',
email: () => 'Debe ingresar un correo válido'
},
messageInput: {
required: () => 'El campo Mensaje es requerido'
},
nameInput: {
required: () => 'El campo Nombre es requerido'
},
phoneInput: {
regex: () => 'El formato del teléfono es XXXX-XXXXXXX'
}
}
};
Validator.extend('phoneNumber', phoneNumber)
Validator.localize('es', dict);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('banner-principal', require('./components/BannerPrincipal.vue'));
Vue.component('blog-destacados', require('./components/BlogUltimosPosts.vue'));
Vue.component('repuestos-destacados', require('./components/RepuestosDestacados.vue'));
//Vue.component('repuestos-destacados-blog', require('./components/RepuestosDestacadosBlog.vue'));
Vue.component('footer-master', require('./components/Footer.vue'));
Vue.component('modal-cita', require('./components/ModalCita.vue'));
/*Vue.component('mini-slider', require('./components/MiniSliderWelcome.vue'));*/
Vue.component('modal-aliados', require('./components/ModalAliados.vue'));
Vue.component('blog-mas-reciente', require('./components/BlogMasRecientePost.vue'));
Vue.component('blog-lista-posts', require('./components/BlogListaPosts.vue'));
Vue.component('blog-archivo', require('./components/BlogArchivo.vue'));
Vue.component('categorias-repuestos', require('./components/CategoriasRepuestos.vue'));
Vue.component('repuestos-lista', require('./components/RepuestosLista.vue'));
Vue.component('repuesto-detalle', require('./components/DetalleProducto.vue'));
Vue.component('pedidoswizard', require('./components/PedidosWizard.vue'));
Vue.component('listapedidos', require('./components/PedidosLista.vue'));
Vue.component('client-edit', require('./components/ClientEdit.vue'));
Vue.component('confirmarpago', require('./components/ConfirmarPago.vue'));
const app = new Vue({
el: '#app'
});
Level 51
Can you also share your webpack.mix.js
Level 1
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue']);
//.sass('resources/assets/sass/app.scss', 'public/css');
mix.disableNotifications();
/*
|--------------------------------------------------------------------------
| General dependencies
|--------------------------------------------------------------------------
|
|
*/
mix.styles([
'resources/assets/css/plugins/normalize.css',
'bower_components/bootstrap/dist/css/bootstrap.min.css',
'bower_components/bootstrap/dist/css/bootstrap-theme.min.css',
'bower_components/components-font-awesome/css/font-awesome.min.css',
'bower_components/animate.css/animate.min.css'
], 'public/assets/css/general/plugin/general-plugin.min.css').version().sourceMaps();
mix.scripts([
'bower_components/jquery/dist/jquery.min.js',
'bower_components/bootstrap/dist/js/bootstrap.min.js',
'resources/assets/js/plugin/ofi.min.js',
'resources/assets/js/plugin/tokenizer.js',
'resources/assets/js/plugin/parser.js',
'resources/assets/js/plugin/vminpoly.js',
'resources/assets/js/plugin/instafeed.min.js',
'resources/assets/js/plugin/custominstafeed.js',
'resources/assets/js/plugin/wow.min.js'
], 'public/assets/js/general/plugin/general-plugin.min.js').version().sourceMaps();
/*
|--------------------------------------------------------------------------
| Web dependencies
|--------------------------------------------------------------------------
|
|
*/
mix.styles([
'resources/assets/css/web/master.css'
], 'public/assets/css/web/master-styles.min.css').version().sourceMaps();
mix.styles([
'resources/assets/css/web/welcome.css'
], 'public/assets/css/web/welcome-styles.min.css').version().sourceMaps();
mix.styles([
'resources/assets/css/web/category-of-products.css'
], 'public/assets/css/web/category-of-products-styles.min.css').version().sourceMaps();
mix.styles([
'resources/assets/css/web/subcategories-of-products.css'
], 'public/assets/css/web/subcategories-of-products-styles.min.css').version().sourceMaps();
mix.styles([
'resources/assets/css/web/product-detail.css'
], 'public/assets/css/web/product-detail-styles.min.css').version().sourceMaps();
mix.styles([
'resources/assets/css/web/post-generals.css'
], 'public/assets/css/web/post-generals-styles.min.css').version().sourceMaps();
mix.styles([
'resources/assets/css/web/post-details.css'
], 'public/assets/css/web/post-details-styles.min.css').version().sourceMaps();
/*
|--------------------------------------------------------------------------
| Panel dependencies
|--------------------------------------------------------------------------
|
|
*/
mix.styles([
'bower_components/bootstrap/dist/css/bootstrap.min.css',
'bower_components/bootstrap/dist/css/bootstrap-theme.min.css',
'bower_components/animate.css/animate.min.css',
'bower_components/ionicons/css/ionicons.min.css',
'resources/assets/css/panel/AdminLTE.min.css',
'resources/assets/css/panel/skins/_all-skins.min.css',
'resources/assets/css/panel/principal.css',
], 'public/assets/css/panel/general-plugin.min.css').version().sourceMaps();
mix.styles([
'resources/assets/css/panel/login.css'
], 'public/assets/css/panel/login.css');
mix.styles(['node_modules/dropzone/dist/min/dropzone.min.css'], 'public/assets/css/general/dropzone.min.css').version().sourceMaps();
mix.scripts([
'bower_components/bootstrap/dist/js/bootstrap.min.js',
'resources/assets/js/panel/adminlte.min.js'
], 'public/assets/js/panel/general-plugin.min.js').version().sourceMaps();
mix.js('resources/assets/js/panel/base-dependencies.js', 'public/assets/js/panel').version().sourceMaps();
mix.js('resources/assets/js/panel/datatables.js', 'public/assets/js/panel').version().sourceMaps();
mix.js('resources/assets/js/panel/FormAliados.js', 'public/assets/js/panel').version().sourceMaps();
mix.js('resources/assets/js/panel/FormBlog.js', 'public/assets/js/panel').version().sourceMaps();
mix.js('resources/assets/js/panel/FormTipoVehiculo.js', 'public/assets/js/panel').version().sourceMaps();
mix.js('resources/assets/js/panel/FormCategoria.js', 'public/assets/js/panel').version().sourceMaps();
mix.js('resources/assets/js/panel/FormSubcategoria.js', 'public/assets/js/panel').version().sourceMaps();
mix.js('resources/assets/js/panel/FormMarca.js', 'public/assets/js/panel').version().sourceMaps();
/*
|--------------------------------------------------------------------------
| Copy fonts
|--------------------------------------------------------------------------
|
|
*/
mix.copyDirectory('bower_components/bootstrap/fonts', 'public/assets/css/general/fonts');
mix.copyDirectory('bower_components/components-font-awesome/fonts', 'public/assets/css/general/fonts');
mix.copy('bower_components/owl.carousel/dist/assets/ajax-loader.gif', 'public/assets/css/general/plugin');
mix.copy('bower_components/owl.carousel/dist/assets/owl.video.play.png', 'public/assets/css/general/plugin');
Level 51
Does the issue still happen if you remove .extract(['vue']);?
1 like
Level 1
It actually worked, is it because I was already declaring window.vue on app.js?
Level 51
There is an open issue that's related to your issue I think
1 like
Please or to participate in this conversation.