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

As it works with webpack CLI, the problem is almost definitely in your node build script. To be able to help you, you need to post your node script. The webpack config itself works fine and using it with the node API works just as well. — Michael Jungo, Mar 13 '17 at 22:15

score 0 · Accepted Answer · answered Mar 14 '17 at 14:05

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 :)

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

1 Answers1