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

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