Hitostacha's avatar

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?

0 likes
7 replies
D9705996's avatar

You need to show us your code that is causing the error.

Hitostacha's avatar

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'
});
Hitostacha's avatar
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');
D9705996's avatar
D9705996
Best Answer
Level 51

Does the issue still happen if you remove .extract(['vue']);?

1 like
Hitostacha's avatar

It actually worked, is it because I was already declaring window.vue on app.js?

Please or to participate in this conversation.