Webpack Extract Text Plugin - css-loader problems in Webpack Node API

Question

What I am trying to achieve is the following: I have an express server which, on a webhook, should regenerate my statically generated web application. I am using webpack to do so. If I generate the static site from webpack's CLI, everything works like a charm. If I, however, import webpack the configuration from within node, I get Webpack Options Validation Errors:

- configuration.module.rules[4].loader should be one of these:
  non-empty string | non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]

After debugging this for a bit, I found out that there is a loader added, wherever I use the WebpackExtractTextPlugin, namely the loader:

{ loader: 1178, options: [Object] }

This is what my shared webpack.js looks like:

module.exports = (env) => ({
    context : path.resolve(__dirname, '..', 'entries'),
    output  : {
        path       : path.resolve(__dirname, '..', '..', 'build'),
        filename   : '[name].js',
        publicPath : '/'
    },
    plugins : [
        new webpack.EnvironmentPlugin({
            // ...
        }),
    ],
    module : {
        rules : [
            {
                test    : /\.js$/,
                loader  : 'babel-loader',
                exclude : /node_modules/,
                options : {
                    babelrc : false,
                    presets : ['es2015', 'stage-0', 'react'],
                }
            },
            {
                test   : /\.json$/,
                loader : 'json-loader'
            },
            {
                test   : /\.(jpg|jpeg|png|gif|ico)$/,
                loader : 'file-loader?name=img/[name].[ext]'
            },
            {
                test   : /\.svg$/,
                loader : 'file-loader?name=svg/[name].[ext]'
            },
            {
                test   : /\.less$/,
                loader : ExtractTextPlugin.extract({
                    fallback : 'style-loader',
                    use      : [
                        {
                            loader  : 'css-loader',
                            options : {
                                importLoaders   : 1,
                                modules         : true,
                                minimize        : env !== 'dev',
                                sourceMap       : env === 'dev',
                                discardComments : { removeAll : true },
                                localIdentName  : env === 'dev' ? '[path][name]-[local]-[hash:base64:3]' : '[hash:base64:5]'
                            }
                        },
                        {
                            loader  : 'less-loader',
                            options : {
                                sourceMap  : env === 'dev',
                                modifyVars : lessConfig
                            }
                        }
                    ]
                })
            },
            {
                test   : /\.css$/,
                loader : ExtractTextPlugin.extract({
                    fallback : 'style-loader',
                    use      : {
                        loader  : 'css-loader',
                        options : {
                            minimize  : env !== 'dev',
                            sourceMap : env === 'dev'
                        }
                    }
                })
            }
        ]
    },
    // ...
})

My webpack.static.js merges the above with this:

module.exports = (env) => merge.smart(webpackConfig(env), {
    entry : {
        static : [
            'babel-polyfill',
            './static'
        ]
    },
    output : {
        path          : path.resolve(__dirname, '..', '..', 'build', 'static'),
        libraryTarget : 'umd',
        publicPath    : '/'
    },
    externals : vendorConfig,
    plugins   : [
        new ProgressBarPlugin(),
        new ExtractTextPlugin({
            filename  : 'client.css',
            allChunks : true
        }),
        new StaticSiteGeneratorPlugin({ paths })
    ],
    module : {
        rules : [
            {
                test   : /\.js$/,
                loader : 'babel-loader',
                query  : {
                    presets : ['es2015', 'stage-0', 'react'],
                    plugins : ['system-import-transformer']
                }
            }
        ]
    },
    target : 'node'
})

Does anyone have an idea where that additional loader might come from or what else I am doing wrong to end up with this problem??

I am using: webpack@2.2.1 extract-text-webpack-plugin@2.1.0

Answer 1

Nevermind. The problem was that I was requiring the webpack config from a server that was also subject to being bundled by webpack.

I moved the part that builds the static site into an own script/server running on a different port and now everything works like a charm :)