Webpack: Unknown argument: mode / configuration has an unknown property 'mode'

Question

getting crazy with this, really missing something....

I have webpack 4.6.0, webpack-cli ^2.1.2, so the latest.

Following the docs (https://webpack.js.org/concepts/mode/), want to use the mode to have to configs, one for production and one for development, but I get:

configuration[0] has an unknown property 'mode'. 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? }

What am I missing :O?????

module.exports = [
  merge(base, {
    mode: 'development',
    output: {
      path: path.resolve(__dirname, './public/assets/development'),
    },
  }),
  merge(base, {
    mode: 'production',
    output: {
      path: path.resolve(__dirname, './public/assets/production'),
      filename: '[name].bundle.js',
    },
  }),
]

Answer 1

Ok, the problem was that I had an older webpack installed globally, I think...

Answer 2

I had some old version running globally on my system. Once I removed them things started working for me. I ran: which webpack to see where they were coming from. I had npm and ruby gems both installed so I removed them both.

Uninstall with NPM

npm un -g webpack

Uninstall Ruby Gems

It may prompt you which version to uninstall. I choose all of them.

gem uninstall webpacker

I had some installed with ruby gems so I had to run gem uninstall webpacker I ended up removing all of them. Then I had to run bundle install again. It can be useful to run which webpack to determine where it's globally installed. I would recommend globally uninstalling it for ruby gems and npm. To uninstall with npm: npm un -g webpack

Answer 3

For users having to support legacy software (hi Debian folks) here is the patch from v4 to v3 support.

[...]
+const webpack = require('webpack');
[...]
     devtool: 'source-map',
-    mode: 'production',
+    // mode: 'production', // Webpack >= 4
[...]
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': JSON.stringify('production')
+        })
+    ],
[...]