webpack/HtmlWebpackPlugin Error: invalid configuration object

Question

I'm currently trying to set up a dynamic markdown/pug.js workflow. But I get an "Invalid configuration object" error, most probably generated by HtmlWebpackPlugin.

This is my webpack.config.json:

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


const markdownFilesData = fs
    .readdirSync('./entries')
    .filter((filename) => {
        return /\.md$/.test(filename);
    })
    .map((filename) => {
        return {
            markdown: fs.readFileSync(path.join(MARKDOWN_FILE_DIR, filename), 'utf8'),
            filename
        };
    });

const mdToHtmlPlugin = ({filename, markdown}) => {
    return new HtmlWebpackPlugin({
        template: 'pug-html-loader!templates/index.pug',
        cache: true,
        filename: `pages/${filename}.html`,
        bodyHTML: marked(markdown)
    });
};

module.exports = {
    entry: {
        app: './src/scripts/main.js',
        compile: './scripts/styles.js',
    },
    output: {
        libraryTarget: 'umd',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    plugins: [
        Array.prototype.map.call(markdownFilesData, mdToHtmlPlugin)
    ]
};

When I add the map-call to my plugins-array, I get the following Error message:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'strictThisContextOnImports'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?
, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.output has an unknown property 'chunkLoadTimeout'. These properties are valid:
   object { auxiliaryComment?, chunkFilename?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpda
teFunction?, hotUpdateMainFilename?, jsonpFunction?, library?, libraryTarget?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
   Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
 - configuration.resolve has an unknown property 'cacheWithContext'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCall
s? }
 - configuration.resolveLoader has an unknown property 'cacheWithContext'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCall
s? }

However, I cannot find where these options are set anywhere. When I console.log Array.prototype.map.call(markdownFilesData, mdToHtmlPlugin), I get this output:

[ HtmlWebpackPlugin {
    options: 
     { template: 'pug-html-loader!templates/index.pug',
       filename: 'pages/hello-world.md.html',
       hash: false,
       inject: true,
       compile: true,
       favicon: false,
       minify: false,
       cache: true,
       showErrors: true,
       chunks: 'all',
       excludeChunks: [],
       title: 'Webpack App',
       xhtml: false,
       bodyHTML: '<h1 id="hello-world">Hello World</h1>\n<p>Yo Sup</p>\n' } } ]

And I cannot find the options that produce the error in this config object.

I already reinstalled my project as suggested in this question and checked my webpack version.

These are my Dependencies:

"devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "css-loader": "~0.28.7",
    "eslint": "~4.10.0",
    "eslint-config-airbnb": "~16.1.0",
    "extract-loader": "~1.0.1",
    "extract-text-webpack-plugin": "~3.0.2",
    "file-loader": "~1.1.5",
    "glob": "~7.1.2",
    "html-loader": "~0.5.1",
    "html-webpack-plugin": "2.30.1",
    "marked": "0.3.7",
    "node-sass": "~4.6.0",
    "pug": "~2.0.0-rc.4",
    "pug-html-loader": "~1.1.5",
    "pug-loader": "~2.3.0",
    "sass-loader": "~6.0.6",
    "style-loader": "~0.19.0",
    "webpack": "3.10.0"
  },

How can I get rid of this error?

score 1 · Accepted Answer · answered Dec 12 '17 at 13:53

As can be seen from your map output, you are creating an array of HtmlWebpackPlugin instances and then attempting to add this as the first element of the plugins array. It kinda looks like this:

plugins: [
    [
        new HtmlWebpackPlugin(...),
        new HtmlWebpackPlugin(...),
        // ...
    ]
]

If these are the only plugins you need, you could instead just assign the output of map directly to plugins:

plugins: Array.prototype.map.call(markdownFilesData, mdToHtmlPlugin)

Otherwise (as you suggested in your own comment), you can use the spread operator to append them:

plugins: [
    // Other plugins.
    ...Array.prototype.map.call(markdownFilesData, mdToHtmlPlugin)
]

As a side-note, if there's no specific reason for using Array.prototype, you should just be able to use map directly as markdownFilesData is an Array:

...markdownFilesData.map(mdToHtmlPlugin)

webpack/HtmlWebpackPlugin Error: invalid configuration object

1 Answers1