Laravel-mix: Cannot read property 'call' of undefined

[tillkruss]

• Laravel Mix Version: 0.8.8
• Node Version: v7.7.2
• NPM Version: 4.1.2
• OS: macOs 10.12.3

Description:

I'm getting the following errors:

Uncaught TypeError: Cannot read property 'call' of undefined (in manifest.js)
Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_vue___default.a is not a constructor (in master.js)

Not sure if I'm doing something wrong. I laid out the setup the the comments below.

This occurs when using npm run dev and npm run production. I'm not using versioning, only extracting.

Steps To Reproduce:

import Vue from 'vue';

window.Vue = Vue;
window.bus = new Vue;

mix.js('resources/assets/js/master.js', 'public/js')
   .extract(['vue'], 'public/js/vendor.js');

[tillkruss]

The full setup looks like this:

mix.js('resources/assets/js/master.js', 'public/js')
   .js('resources/assets/js/room.js', 'public/js')
   .js('resources/assets/js/listing.js', 'public/js')
   .js('resources/assets/js/account.js', 'public/js')
   .extract([
       'vue',
       'jquery',
       'js-cookie',
       'selectize',
       'pusher-js',
       'laravel-echo',
   ], 'public/js/vendor.js')
   .extract([
       'plupload',
       'sortablejs',
   ], 'public/js/vendor-account.js');

[tillkruss]

The master.js file:

require('./_bootstrap');

// more code here...

The _bootstrap.js file:

import Vue from 'vue';

window.Vue = Vue;
window.bus = new Vue;

// more code here...

[ghost]

I've encountered this same issue.

it's caused by webpack md5 hash https://github.com/erm0l0v/webpack-md5-hash/issues/9

[tillkruss]

@wppd: Is there a fix for that, or does Mix need to be changed?

[ghost]

@tillkruss
I override Mix output method. it's where you define the file name pattern.

'[name].[chunkhash].js'

I simply replace chunkhash with timestamp.

As you would expect, all files will be re-generated, even the vendors, when you run npm run production. It's a lousy solution.

I'm testing another solution now: HashedModuleIdsPlugin

you can copy webpack.config.js and replace new webpackPlugins.WebpackMd5HashPlugin(), with new webpack.HashedModuleIdsPlugin

[tillkruss]

@wppd: Thanks!

I'm actually seeing this issue using npm run dev.

I tried replacing plugins.WebpackMd5HashPlugin with webpack.HashedModuleIdsPlugin, but that doesn't fix it for me.

Any other clues?

[tillkruss]

Here is a screenshot of the full error:

[JeffreyWay]

Closing this, since it seems to be a duplicate of #581.

[tillkruss]

@JeffreyWay: Is it? Using HashedModuleIdsPlugin doesn't fix it for me.

However I just found that setting minChunks to 1 fixes it, but is not recommended.

[tillkruss]

There seems to be a solution in https://github.com/webpack/webpack/issues/4445, but I have no idea how to put that into Mix, otherwise I'd make a PR.

[JeffreyWay]

@tillkruss Does this still happen if you only call mix.extract() once?

[tillkruss]

@JeffreyWay: No, it works fine with 2 extract() calls.

I actually works fine with 3 as well, as long as the 3rd only contains a single vendor file?!

Works:

.extract([
       'vue',
       'jquery',
       'js-cookie',
       'selectize',
       'pusher-js',
       'laravel-echo',
   ], 'public/js/vendor.js')
   .extract([
       'plupload',
       'sortablejs',
   ], 'public/js/vendor-account.js');

Works:

.extract([
       'vue',
       'jquery',
       'js-cookie',
       'selectize',
       'pusher-js',
       'laravel-echo',
   ], 'public/js/vendor.js')
   .extract([
       'plupload',
       'sortablejs',
   ], 'public/js/vendor-account.js')
   .extract([
       'webrtc-adapter'
   ], 'public/js/vendor-room.js');

NOT Working:

.extract([
       'vue',
       'jquery',
       'js-cookie',
       'selectize',
       'pusher-js',
       'laravel-echo',
   ], 'public/js/vendor.js')
   .extract([
       'plupload',
       'sortablejs',
   ], 'public/js/vendor-account.js')
   .extract([
       'video.js',
       'videojs-contrib-hls',
       'videojs-contrib-media-sources',
       'webrtc-adapter'
   ], 'public/js/vendor-room.js');

NOT Working:

.extract([
       'vue',
       'jquery',
       'js-cookie',
       'selectize',
       'pusher-js',
       'laravel-echo',
   ], 'public/js/vendor.js')
   .extract([
       'plupload',
       'sortablejs',
   ], 'public/js/vendor-account.js')
   .extract([
       'simplemde',
       'webrtc-adapter',
   ], 'public/js/vendor-room.js');

[tillkruss]

Two is enough for me, three is just nice to have, not nessesary if it's to weird of an issue.

[ajcastro]

I wonder if my problem is related to this, but when I use extract(), I got error on iCheck jquery plugin. But If didnt use extract(), there is no error... I console.log the $ variable in the plugin and it shows undefined when using extract(). Seems like window.jQuery is not yet set but how did it happen?

[manyeung]

I encounter the same issue when I use extract.

The problem occur when I am using npm run hot with mix.extract(). When I remove mix.extract(), everything goes well.

[MrSnoozles]

@manyeung Same here. Getting the error with when running npm run hot with mix.extract()

[bskimball]

FWIW, I get this issue occasionally when running npm run watch

To fix it:

delete the js files in public/js
delete public/mix-manifest.json
npm run dev

Then you should be able to run npm run watch again. I'm assuming something gets hosed with the manifest and it needs to be re-created.

[vedmant]

I have the same problem when I run yarn watch but it works normally when I run yarn prod. I have .version() enabled. Does it means that I can't use yarn watch with enabled .version() ?

[goyote]

What's the solution here?

[njoguamos]

I am having the same problem. I have dynamic imports enabled. When i run yarn watch everything works correctly. But when i run yarn dev or yarn production i get this error

Here is a screenshot of the full error:

[adriandmitroca]

@njoguamos I am facing exactly the same issue, don't suppose you found a way over this?

[njoguamos]

@njoguamos I am facing exactly the same issue, don't suppose you found a way over this?

I ended up by disabling .extract 😐

[nmfzone]

Here I faced this issue in Laravel Mix 5.0.4. Sadly, I'm not using .extract(), just install fresh Laravel 7.3, run yarn run hot, and this error happens.

@JeffreyWay

[gpressutto5]

I'm not using .extract() and I'm getting the same error in a fresh new Laravel 7 project with php artisan ui vue --auth. Here's my webpack.mix.js file:

const 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/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

[mdnurulmomen]

I'm getting the same error without using .extract() method either.
Had a successfull build with _npm run dev_, but getting this error when browsing routes !!
Tried with _npm run production_ and _npm run watch_

[d3v4nt]

Same here, can't resolve this issue 😰

[adriandmitroca]

If you are using dynamic imports (most likely you do when everything works in dev mode) you need to import blank .scss file at top of your app.js file.

This solves the issue.

[mdnurulmomen]

@adriandmitroca
Thanks Brother.
I've figured it out. You re-confirmed the issue.

Now, i'm fighting with another one.
npm run dev or npm run watch emitting 0.js, 1.js, rather than [named].js.

Please Help me out.

// webpack.mix.js
`mix.webpackConfig(webpack => {
return {
output: {
publicPath: '/',
filename: '[name].js',
chunkFilename: 'js/[name].js',
},
};
});

mix.babelConfig({
plugins: ['@babel/plugin-syntax-dynamic-import'],
});

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');`

// app.js
const router = new VueRouter({ mode : 'history', routes : [ { path: '/home', name: 'admin.home', component: () => import(/* webpackChunkName : "home-component" / './components/admin/HomeComponent.vue') }, { path: '/restaurants', name: 'admin.restaurants.index', component: () => import(/ webpackChunkName : "restaurant-list" */'./components/admin/RestaurantIndexComponent.vue') }, ], });

[adriandmitroca]

I'm not using named chunks. Why do you need them?

[mdnurulmomen]

I'm using dynamic import for better user experience as i have more than 30 vue components so far.

[adriandmitroca]

Sure, I get that. But that doesn't mean that you have to use named chunks. Default ones (0.js, 1.js, 2.js) are good enough for that.

[mdnurulmomen]

I thought to get better readable chunks.

[adriandmitroca]

To be honest it is totally redundant (happens only behind the scenes, only browser sees chunk names) but from your side requires extra comments in your code that looks messy.

I think it is worth reconsidering if its worth it.

[mdnurulmomen]

Ow, Okay.
Except looking numbered name, its all working fine.

As i'm developing dynamic imports for the first time, i'm eager.
If chunk names are named manually, is it gonna be visible only for browser ?? !!!
But, I've seen the named chunks at other places so far.

[adriandmitroca]

Yeah, you don't really have to care about chunks names. It's unnecessary issue for you.

[nmfzone]

@mdnurulmomen It seems your issue is different from the original issue. Please don't spam unrelated issue, since we all get notified. Thanks

[mdnurulmomen]

Okay, My Apologies.
Anyway, Thanks @adriandmitroca .

[Helle1]

If you are using dynamic imports (most likely you do when everything works in dev mode) you need to import blank .scss file at top of your app.js file.

This solves the issue.

how would I achieve this? can you give me an example?

[adriandmitroca]

Create empty scss file and then just import it (like JS file) inside your main JS file that's processed by Mix.