Laravel-mix: Upgraded laravel-mix, executing npm run watch webpack claims Invalid configuration object

[michalexvr]

• Laravel Mix Version: 4.0.12
• Node Version (node -v): v8.12.0
• NPM Version (npm -v): 6.4.1
• OS: Fedora 28

Description:

After upgrading Laravel Mix, i tried to run my application using 'npm run watch' and i've received the following error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'optimization'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           optimization: ...
         }
       })
     ]
 - configuration.stats should be one of these:
   object { all?, context?, hash?, version?, timings?, performance?, depth?, assets?, env?, colors?, maxModules?, chunks?, chunkModules?, modules?, children?, cached?, cachedAssets?, reasons?, source?, warnings?, errors?, warningsFilter?, excludeAssets?, excludeModules?, exclude?, entrypoints?, errorDetails?, chunkOrigins?, modulesSort?, moduleTrace?, chunksSort?, assetsSort?, publicPath?, providedExports?, usedExports?, optimizationBailout? } | boolean | "none" | "errors-only" | "minimal" | "normal" | "detailed" | "verbose"
   -> Used by the webpack CLI program to pass stats options.
   Details:
    * configuration.stats has an unknown property 'builtAt'. These properties are valid:
      object { all?, context?, hash?, version?, timings?, performance?, depth?, assets?, env?, colors?, maxModules?, chunks?, chunkModules?, modules?, children?, cached?, cachedAssets?, reasons?, source?, warnings?, errors?, warningsFilter?, excludeAssets?, excludeModules?, exclude?, entrypoints?, errorDetails?, chunkOrigins?, modulesSort?, moduleTrace?, chunksSort?, assetsSort?, publicPath?, providedExports?, usedExports?, optimizationBailout? }
    * configuration.stats should be a boolean.
    * configuration.stats should be one of these:
      "none" | "errors-only" | "minimal" | "normal" | "detailed" | "verbose"

I think that i have to modify something on the webpack config file but i dont know what.

Steps To Reproduce:

I just deleted the older version and updated laravel-mix using:

npm remove laravel-mix
npm install laravel-mix@^4.0.12 --save-dev

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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "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 --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"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "axios": "^0.18",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-component": "^1.1.0",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "bootstrap": "^3.3.7",
    "chai": "^3.5.0",
    "chalk": "^2.0.1",
    "chartist": "^0.11.0",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "es6-promise": "^4.2.4",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^3.0.0",
    "jquery": "^3.2",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "laravel-mix": "^4.0.12",
    "lodash": "^4.17.4",
    "mocha": "^3.2.0",
    "node-sass": "^4.5.3",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "popper.js": "^1.12",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "url-loader": "^0.5.8",
    "vue": "^2.3.0",
    "vue-clickaway": "^2.1.0",
    "vue-hot-reload-api": "^2.2.4",
    "vue-loader": "^13.7.3",
    "vue-router": "^2.2.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.13",
    "vue-test-utils": "^1.0.0-beta.3",
    "webpack": "^3.2.0",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "dependencies": {
    "ajv": "^6.5.4",
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.26.3",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-component": "^1.1.0",
    "babel-plugin-istanbul": "^4.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chai": "^3.5.0",
    "chalk": "^2.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^5.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "element-ui": "^2.4.7",
    "eslint": "^3.19.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^3.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "file-loader": "^0.11.2",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "fuse.js": "^3.2.1",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "inject-loader": "^3.0.0",
    "karma": "^1.4.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-phantomjs-shim": "^1.4.0",
    "karma-sinon-chai": "^1.3.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "mocha": "^3.2.0",
    "node-sass": "^4.5.3",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "sinon": "^2.1.0",
    "sinon-chai": "^2.8.0",
    "sweetalert2": "^7.28.7",
    "url-loader": "^0.5.8",
    "v-tooltip": "^2.0.0-rc.33",
    "vue-hot-reload-api": "^2.2.4",
    "vue-loader": "^13.7.3",
    "vue-resource": "^1.5.1",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.13",
    "vue-test-utils": "^1.0.0-beta.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  }
}

Any suggestion?

[ankurk91]

Oh, man. 😮

You have tons of dependencies that laravel-mix pulls for you already.
For example: Laravel mix v4 is using webpack and you have webpack 3 in your package.json.

I would suggest you to do a fresh configuration.

[juhasev]

I have the same issue did anybody figure out how to fix this yet? I've updated all the modules I think and it is still happening.

"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/preset-env": "^7.2.3",

Webpack can be removed from package.json as Laraval MIx includes it automagically.

[juhasev]

In my case the module the caused the issue was mocha-webpack. I discovered that by running:

npm list --depth 0

Once I got rid of all the errors / dependencies the app now compiles fine.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.