wagramdeveloper's avatar

Mix, npm run hot, browser crash: Uncaught TypeError: Cannot read property 'call' of undefined

This is Laravel Framework 6.0.3, npm version 6.9.0, Fedora 29, webpack [email protected]

Following the Laravel Mix documentation I added

    .options({
        hmrOptions: {
            host: 'xxx.yyy',
            port: 3000,
        },
    })

to webpack.mix.js, otherwise no changes.

This happens with the example route using welcome.blade.php as well as my own blade templates. I am running a Laravel website pointing app.js and app.cs at port 3000 where I am running npm run hot.

When running in Chrome (Version 78.0.3890.0 (Official Build) canary (64-bit)) with the developer tools open, Chrome stops with the following error:

app.js:727 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)
    at eval (app.scss?e8be:1)
    at Object../node_modules/extract-text-webpack-plugin/dist/loader.js?!./node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./resources/sass/app.scss (app.js:1164)
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)
    at eval (app.scss?11e7:2)
    at Object../resources/sass/app.scss (app.js:1737)
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)

When I set a break point at the offending line (checking for undefined modules[moduleId]:

/******/        modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

I see that the offending moduleId is ./node_modules/css-loader/lib/css-base.js. That file is definitely present in node_modules.

The example component is loaded and changes to ExampleComponent.vue are reflected in the browser immediately so it is not clear if this crash affects the web page in any way.

There are a few hits to possibly related github issues, mostly in webpack itself, mentioning the error message in various contexts, but I can't see a clear solution for my setup. It seems to possibly be an intermittent problem for some people.

Does anyone know how to solve this problem? Does the crash have any implications for the web page?

Thanks

0 likes
5 replies
m2de's avatar

Encountered the same issue today with run hot on a fresh Laravel 5.8 install.

app.js:727 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)
    at Object../node_modules/extract-text-webpack-plugin/dist/loader.js?!./node_modules/style-loader/index.js!./node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./resources/sass/app.scss (app.js:3271)
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)
    at Object../resources/sass/app.scss (app.js:26073)
    at __webpack_require__ (app.js:727)
    at fn (app.js:101)
    at Object.0 (app.js:26130)
    at __webpack_require__ (app.js:727)
asterism's avatar

I hame same issue

How to solve this problem?

  1. npm run hot -> fire error

  2. source resave -> passive reload -> error clear

Only occurs on the first run when npm run hot

2 likes
nanosolutions's avatar

We have had this for while random, crash, becomes slow and then it runs out of mem. Tried all node 0.10/11/12 same results.

Sazar's avatar

For everyone who annoyed to update source once manually every time I wrote some fix that can be added to your mix file:

//fix to force hot script reloads once after compiled
const mix = require('laravel-mix');
const fs = require('fs');

if (Mix.isWatching()) {
  let fires = 0;
  let tempString = "\n//temp";
  let filename = 'resources/assets/styles/index.scss';
  mix.then((stats) => {
    if (fires === 0) {
      fs.appendFile(filename, tempString, function (err) {
        if (err) throw err;
        console.log('Added temp string to force recompiling');
      });
      fs.readFile(filename, 'utf8', function (err, data) {
        if (err) throw err;
        let newData = data.replace(tempString, '');
        fs.writeFile(filename, newData, function (err) {
          if (err) throw err;
          console.log('Removed temp string');
        });
      });
    }
    fires++;
  })
}
1 like

Please or to participate in this conversation.