npm run dev doesn't work after npm update

[iteniasim]

after clean install if you just run npm install and npm audit fix everything works but if you run update then it stops working. npm run dev stopped working altogether, with a errors i am not capable of understanding yet, and npm run watch and npm run hot also seem to have some problem as it doesn't seem to reflect any changes even if the compilation seems to be completed.

I am new to programming and i am probablly not capable of finding the problem so can someone please point out what the problem is here.....

TypeError: Cannot read property 'length' of undefined at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\laravel-mix-versionhash\src\index.js:145:42 at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\laravel-mix\src\Dispatcher.js:34:47 at Array.forEach () at Dispatcher.fire (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\laravel-mix\src\Dispatcher.js:34:28) at Mix.dispatch (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\laravel-mix\src\Mix.js:118:25) at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\laravel-mix\src\builder\webpack-plugins.js:43:46 at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\tapable\lib\HookCodeFactory.js:33:10), :25:1) at AsyncSeriesHook.lazyCompileHook (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\webpack\lib\Compiler.js:304:22 at Compiler.emitRecords (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\webpack\lib\Compiler.js:499:39) at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\webpack\lib\Compiler.js:298:10 at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\webpack\lib\Compiler.js:485:14 at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\tapable\lib\HookCodeFactory.js:33:10), :18:1) at AsyncSeriesHook.lazyCompileHook (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\webpack\lib\Compiler.js:482:27 at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\neo-async\async.js:2818:7 at done (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\neo-async\async.js:3522:9) at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\tapable\lib\HookCodeFactory.js:33:10), :4:1) at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\webpack\lib\Compiler.js:464:33 at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\graceful-fs\graceful-fs.js:57:14 at FSReqCallback.oncomplete (fs.js:146:23) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\iteni\AppData\Roaming\npm-cache_logs\2020-01-02T12_22_21_700Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ dev: npm run development npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\webpack\lib\Compiler.js:464:33 at C:\Users\iteni\Desktop\Sites\laravel-vue-spa\node_modules\graceful-fs\graceful-fs.js:57:14 at FSReqCallback.oncomplete (fs.js:146:23) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\iteni\AppData\Roaming\npm-cache_logs\2020-01-02T12_22_21_700Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ dev: npm run development npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the @ dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Roaming\npm-cache_logs\2020-01-02T12_22_21_922Z-debug.log

2020-01-02T12_22_21_922Z-debug.log

BTW everything is working as long as i dont update npm so i am doing just that, but i still wanna know why it breaks after npm update...

[nandi95]

@iteniasim which packages are updated? Try updating one by one to identify which one. Then on look at the issues on that package, and within a similar environment.

[ghost]

same problem

it is laravel-mix-versionhash

[ghost]

works only version 1.0.8 1.0.7 in package.json of this project

[ezequiel9]

I have changed my webpack.mix.js due I got errors trying to npm update or installing new packages. to have this one:

first, run npm install clean-webpack-plugin

const path = require('path')
const mix = require('laravel-mix')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
require('laravel-mix-versionhash')

mix
  .js('resources/js/app.js', 'public/dist/js')
  .sass('resources/sass/app.scss', 'public/dist/css')
  //.disableNotifications()

if (mix.inProduction()) {
  mix
  // .extract() // Disabled until resolved: https://github.com/JeffreyWay/laravel-mix/issues/1889
  // .version() // Use `laravel-mix-versionhash` for the generating correct Laravel Mix manifest file.
    .versionHash()
} else {
  mix.sourceMaps()
}

mix.webpackConfig({
  plugins: [
    // new BundleAnalyzerPlugin()
    new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['dist/*'] })
  ],
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.join(__dirname, './resources/js')
    }
  },
  output: {
    chunkFilename: 'dist/js/bundle/[chunkhash].js',
    path: path.resolve(__dirname, './public')
  }
})

in this case, what I am doing is replacing the fs node function for a webpack plugin. fs removeSync seems to be excecuting after mix does the job and it removes everething.

Hope it helps to someone

[yurii-github]

so, what about all these errors? I've just installed this fresh template as composer create-project --prefer-dist cretueusebiu/laravel-vue-spa

and it only works as

yarn prod
./artisan serve

with code below i see code only from prod build

yarn watch
./artisan serve

and with yarn hot page at http://localhost:8080/ hangs with 'waiting for localhost'

[baradhili]

Linked to this https://github.com/ctf0/laravel-mix-versionhash/issues/27

[kobadg]

So, a solution for me was to change the laravel-mix-versionhash in the main package.json to use 1.0.8, it currently tries to use 1.1.2. However there must be a bug in it, which doesn't work with the new version of NPM.

I assume that @cretueusebiu knows about this, and maybe @ctf0 does too?

[augustpemberton]

The reason npm run watch doesn't work after updating is because it now builds to public/build/dist instead of public/dist, so the script tags are pointing at the wrong place.

see https://github.com/cretueusebiu/laravel-vue-spa/issues/243

[augustpemberton]

Looks like this can be fixed by changing line 34 of webpack.mix.js: from path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build') to path: mix.config.hmr ? '/' : path.resolve(__dirname, './public')

[cretueusebiu]

It looks like mix.then(() => {}) doesn't work anymore when running npm run watch, so that's why it's broken.

[ghost]

@cretueusebiu try change arrow function to plain function. mix.then(function() {})

[skrypt-nl]

I was having the same issue, except for me the problems only appeared when running npm run production. The weird thing is that npm run hot was running 100% fine.

I fixed it by doing the following:

1. Delete the node_modules folder and the package-lock.json file
2. Changing "laravel-mix-versionhash": "^1.0.7" to "laravel-mix-versionhash": "1.0.7" (remove the ^ before 1.0.7)
3. Run npm install.

Everything should be working fine now, and you'll also be able to run npm update (except that laravel-mix-versionhash will not be updated). I hope this works for you as well :)

[ghost]

1.0.8 works, i wrote before

[manu144x]

This is the same issue as mine, it builds in the public/build/ all the assets, instead of the normal one. Even if I use NPM. It behaves exactly the same way. I tried both Windows and Linux.

Which I wouldn't care if it would also update the mix-manifest.json with the correct paths...

You can merge the issues if you want, I don't know if I can do that.

[hazem-taha]

I'm still having that issue

TypeError: Cannot read property 'length' of undefined
    at /Users/abcuser/code/prog/node_modules/laravel-mix-versionhash/src/index.js:209:42
    at /Users/abcuser/code/prog/node_modules/laravel-mix/src/Dispatcher.js:34:47
    at Array.forEach (<anonymous>)
    at Dispatcher.fire (/Users/abcuser/code/prog/node_modules/laravel-mix/src/Dispatcher.js:34:28)
    at Mix.dispatch (/Users/abcuser/code/prog/node_modules/laravel-mix/src/Mix.js:118:25)
    at /Users/abcuser/code/prog/node_modules/laravel-mix/src/builder/webpack-plugins.js:43:46
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/abcuser/code/prog/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/abcuser/code/prog/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/abcuser/code/prog/node_modules/webpack/lib/Compiler.js:304:22
    at Compiler.emitRecords (/Users/abcuser/code/prog/node_modules/webpack/lib/Compiler.js:499:39)
    at /Users/abcuser/code/prog/node_modules/webpack/lib/Compiler.js:298:10
    at /Users/abcuser/code/prog/node_modules/webpack/lib/Compiler.js:485:14
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/abcuser/code/prog/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/abcuser/code/prog/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/abcuser/code/prog/node_modules/webpack/lib/Compiler.js:482:27
    at /Users/abcuser/code/prog/node_modules/neo-async/async.js:2818:7
    at done (/Users/abcuser/code/prog/node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/abcuser/code/prog/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at /Users/abcuser/code/prog/node_modules/webpack/lib/Compiler.js:464:33
    at /Users/abcuser/code/prog/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (fs.js:163:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

and this is my package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env 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": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "lint": "eslint --fix --ext .js,.vue resources/js"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "blueimp-file-upload": "^9.18.0",
    "bootstrap-daterangepicker": "^2.1.25",
    "bootstrap-validator": "^0.11.9",
    "bootswatch": "^4.5.0",
    "chart.js": "^2.8.0",
    "chartist": "^0.11.0",
    "ckeditor": "^4.6.2",
    "datatables.net": "^1.10.15",
    "datatables.net-bs": "^2.1.1",
    "datatables.net-buttons": "^1.3.1",
    "datatables.net-buttons-bs": "^1.3.1",
    "dragula": "^3.7.2",
    "dropzone": "^5.1.1",
    "editable-table": "*",
    "element-ui": "^2.13.2",
    "filepond": "^4.7.1",
    "filepond-plugin-image-preview": "^4.4.0",
    "firebase": "^7.13.1",
    "fullcalendar": "^3.4.0",
    "intl-tel-input": "^16.0.7",
    "ion-rangeslider": "^2.3.0",
    "jquery-bar-rating": "^1.2.2",
    "jquery-filepond": "^1.0.0",
    "js-cookie": "^2.2.1",
    "laravel-echo": "^1.5.4",
    "laravel-vue-datatable": "^0.5.11",
    "moment": "^2.24.0",
    "perfect-scrollbar": "^0.7.1",
    "pusher-js": "^5.0.1",
    "select2": "^4.0.3",
    "slick-carousel": "^1.6.0",
    "sweetalert2": "^8.19.0",
    "tether": "^1.4.0",
    "timepicker": "^1.11.15",
    "toastr": "^2.1.4",
    "vform": "^1.0.1",
    "vue-carousel": "^0.18.0",
    "vue-chartjs": "^3.4.2",
    "vue-form-wizard": "^0.8.4",
    "vue-full-calendar": "^2.7.0",
    "vue-i18n": "^8.18.1",
    "vue-meta": "^1.6.0",
    "vue-multiselect": "^2.1.6",
    "vue-router": "^3.3.2",
    "vue-slick": "^1.1.15",
    "vuex": "^3.4.0",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.10.2",
    "axios": "^0.18.1",
    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.5.0",
    "cross-env": "^5.2.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^9.2.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^5.2.3",
    "jquery": "^3.5.1",
    "laravel-mix": "^4.1.4",
    "laravel-mix-versionhash": "^1.1.3",
    "lodash": "^4.17.15",
    "popper.js": "^1.16.1",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.26.8",
    "sass-loader": "^7.3.1",
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11",
    "webpack-bundle-analyzer": "^3.8.0"
  }
}