kodeninja's avatar

Exception when running "npm run watch-poll" after upgrading to 5.7

Hi,

I've just upgraded from Laravel 5.6 to 5.7: followed the upgrade docs and implemented all changes using the GitHub comparison tool.

I'm not using Vue but rather ReactJS and my webpack.mix.js calls "mix.react" accordingly.

After upgrading, I can no longer run "npm run watch-poll" - the following exception is thrown:

[path-removed]/laravel/node_modules/webpack-cli/bin/cli.js:235
throw err;
^

TypeError: Cannot read property 'find' of undefined
at updateCssLoader.rule ([path-removed]/laravel/node_modules/laravel-mix/src/components/Vue.js:43:26)
at Vue.updateCssLoader ([path-removed]/laravel/node_modules/laravel-mix/src/components/Vue.js:91:21)
at Vue.updateCssLoaders ([path-removed]/laravel/node_modules/laravel-mix/src/components/Vue.js:42:14)
at Vue.webpackConfig ([path-removed]/laravel/node_modules/laravel-mix/src/components/Vue.js:32:14)
at JavaScript.webpackConfig ([path-removed]/laravel/node_modules/laravel-mix/src/components/JavaScript.js:90:22)
at Mix.listen.config ([path-removed]/laravel/node_modules/laravel-mix/src/components/ComponentFactory.js:75:54)
at events.(anonymous function).forEach.handler ([path-removed]/laravel/node_modules/laravel-mix/src/Dispatcher.js:34:47)
at Array.forEach (<anonymous>)
    at Dispatcher.fire ([path-removed]/laravel/node_modules/laravel-mix/src/Dispatcher.js:34:28)
    at Mix.dispatch ([path-removed]/laravel/node_modules/laravel-mix/src/Mix.js:119:25)
    at WebpackConfig.build ([path-removed]/laravel/node_modules/laravel-mix/src/builder/WebpackConfig.js:28:13)
    at Object.<anonymous> ([path-removed]/laravel/node_modules/laravel-mix/setup/webpack.config.js:29:38)
        at Module._compile ([path-removed]/laravel/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
        at tryModuleLoad (module.js:505:12)
        at Function.Module._load (module.js:497:3)
        at Module.require (module.js:596:17)
        at require ([path-removed]/laravel/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
        at WEBPACK_OPTIONS ([path-removed]/laravel/node_modules/webpack-cli/bin/convert-argv.js:115:13)
        at requireConfig ([path-removed]/laravel/node_modules/webpack-cli/bin/convert-argv.js:117:6)
        at [path-removed]/laravel/node_modules/webpack-cli/bin/convert-argv.js:124:17
        at Array.forEach (<anonymous>)
            at module.exports ([path-removed]/laravel/node_modules/webpack-cli/bin/convert-argv.js:122:15)
            at yargs.parse ([path-removed]/laravel/node_modules/webpack-cli/bin/cli.js:232:39)
            at Object.parse ([path-removed]/laravel/node_modules/yargs/yargs.js:567:18)
            at [path-removed]/laravel/node_modules/webpack-cli/bin/cli.js:210:8
            at Object.<anonymous> ([path-removed]/laravel/node_modules/webpack-cli/bin/cli.js:500:3)
                at Module._compile (module.js:652:30)
                at Object.Module._extensions..js (module.js:663:10)
                at Module.load (module.js:565:32)
                at tryModuleLoad (module.js:505:12)
                at Function.Module._load (module.js:497:3)
                at Module.require (module.js:596:17)
                at require (internal/module.js:11:18)
                at Object.<anonymous> ([path-removed]/laravel/node_modules/webpack/bin/webpack.js:155:2)

I'd appreciate it if anyone can point me to the right direction with this..

Thanks!

0 likes
7 replies
BillRiess's avatar

I had some weird issues with Vue still being called when using React as well. Have you tried deleting your node_modules folder and the package.lock.json file and doing a fresh npm install?

kodeninja's avatar
kodeninja
OP
Best Answer
Level 1

To get around this issue I have changed a line in node_modules\laravel-mix\src\components\JavaScript.js:10

from

JavaScript.vueWebpackConfigApplied = false;

to

JavaScript.vueWebpackConfigApplied = true;

this var is being used in line 88, but it's hard for me to understand it:

    /**
     * Override the generated webpack configuration.
     *
     * @param {Object} webpackConfig
     */
    webpackConfig(webpackConfig) {
        if (!JavaScript.vueWebpackConfigApplied) {
            this.vue.webpackConfig(webpackConfig);
        }

        JavaScript.vueWebpackConfigApplied = true;
    }

I'm new to Laravel, if there's any other venue to post this issue and have a Laravel dev take a look, please let me know

BillRiess's avatar

Post your webpack.mix.js and your package.json.

kodeninja's avatar

webpack.mix.js:

mix.webpackConfig({
    module: {
        rules: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }]
    }});

mix.react('resources/js/d.js', 'public/js');
mix.sass('resources/sass/dashboard/d.scss', 'public/css');

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


mix.browserSync({
    // proxy: 'local.trans',
    proxy: 'my.local.trans',
    open: false,
    scrollProportionally: false,
});

package.json:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "@uppy/core": "^0.29.0",
    "@uppy/dashboard": "^0.29.0",
    "@uppy/dropbox": "^0.29.0",
    "@uppy/google-drive": "^0.29.0",
    "@uppy/react": "^0.29.0",
    "@uppy/url": "^0.29.0",
    "@uppy/xhr-upload": "^0.29.0",
    "axios": "^0.18",
    "bootstrap": "^4.2.1",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^5.1",
    "css-loader": "^2.1.0",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.5",
    "moment": "^2.22.2",
    "node-sass": "^4.11.0",
    "nprogress": "^0.2.0",
    "popper.js": "^1.14.5",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-icons": "^3.2.2",
    "react-router-dom": "^4.3.1",
    "react-spinners": "^0.3.3",
    "react-sticky-el": "^1.0.20",
    "reactstrap": "^7.1.0",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "slate": "^0.41.2",
    "slate-react": "^0.18.10",
    "video.js": "^7.4.1",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.5.22"
  }
}
BillRiess's avatar

Try removing vue out of your npm dependancies.

kodeninja's avatar

npm uninstall vue --save-dev still throws the same exception...

Please or to participate in this conversation.