laravel-vue-spa: npm run dev doesn't work after npm update

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 (<anonymous>) 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), <anonymous>: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), <anonymous>: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), <anonymous>: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\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…

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 15 (2 by maintainers)

Most upvoted comments

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

ghost on Jan 4, 2020

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’

yurii-github on Jan 15, 2020

same problem

it is laravel-mix-versionhash

ghost on Jan 4, 2020

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

ezequiel9 on Mar 22, 2020