Exporting webpack config as a function fails

Question

I'am trying to handle development and production eviroment variables in my webpack configuration (see https://webpack.js.org/guides/production/), but it fails with

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration should be an object.

package.json

        {
          "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "./node_modules/.bin/webpack",
            "start": "npm run build && node server.js"
          },
          "devDependencies": {
             //...
             "webpack": "^4.20.2",
             "webpack-cli": "^3.1.2",
             "webpack-dev-middleware": "^3.4.0",
             "webpack-hot-middleware": "^2.24.2"
          }
       }

webpack.config.js

const path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');

let config = {
    entry: {
        app: [
            './src/app/App.tsx', 'webpack-hot-middleware/client'
        ],
        vendor: ['react', 'react-dom']
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].bundle.js'
    },
    // ...
}

This export is working as expected without errors or warnings

module.exports = config; // everything is fine

But this fails

module.exports = function(env, argv) { // this errors

    return config;
};

There is a similiar, but unanswered question here: webpack base config as a function doesn't work

It's a very mysterious behaviour, appreciate if anyone could help!

Can you please share how are you triggering the webpack build ? i'm testing with "webpack": "^4.16.0", and its working fine. — santosh, Oct 02 '18 at 11:44
Indeed, it is working fine, see my answer. Thanks a lot for trying to help. Should have taken a closer look first, not being so impatient ;) — o-faro, Oct 02 '18 at 15:09

score 6 · Accepted Answer · edited Feb 01 '21 at 09:54

Well,it is working. I didn't notice that the error takes place on a total different spot of my code.

I was doing a tutorial about HMR with webpack and express. An it's this lines of code in the express setup which causes the trouble:

server.js

const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
//...
app.use(
    require('webpack-dev-middleware')(compiler, {
        noInfo: true,
        publicPath: webpackConfig.output.publicPath
    })
);

The webpackConfig is only getting a function without being called and so it's not returning an object. So adding parenthesis is all it took to make it work.

const webpackConfig = require('./webpack.config')();
//..

score 0 · Answer 2 · answered Jan 13 '20 at 17:45

The documentation is a bit quirky. You properly forgot the set the env variable from package.json

For instance "start": "webpack --env.prod --", in package.json will pass {prod: true} as the env variable.

Hope this helps.

More info here: https://webpack.js.org/api/cli/#environment-options

Exporting webpack config as a function fails

2 Answers2