The generateIndexHtml property in @nrwl/webpack:webpack executor options is not working in NX Workspace

Question

I'm working on a legacy react project and I want to migrate it to NX workspace. I have to use a custom html-webpack-plugin because the template will be different based on a passed environment variable.

From NX docs if I want to customize the generation of index.html I have to add generateIndexHtml: false to @nrwl/webpack:webpack executor options. but NX still creates two index.html files. one from NX and another one from my custom webpack config.

The Error I recieve:

ERROR in Conflict: Multiple assets emit different content to the same filename index.html

my custom HTMLWebpackPlugin:

new HTMLWebpackPlugin({
        template: path.resolve(
          `apps/webcp/partners/${env.partnerKey}/assets/index.html`
        ),
        filename: 'index.html',
      }),

my @nrwl/webpack:webpack executor object inside project.json`

"executor": "@nrwl/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
        "outputPath": "dist/apps/webcp",
        "index": "apps/webcp/src/index.html",
        "generateIndexHtml": false,
        "baseHref": "/",
        "main": "apps/webcp/src/app/index.js",
        "polyfills": "apps/webcp/src/polyfills.ts",
        "tsConfig": "apps/webcp/tsconfig.app.json",
        "scripts": [],
        "webpackConfig": "apps/webcp/webpack.config.js"
      },

If I remove my custom HTMLWebpackPlugin. I don't get the error and the project compiles successfully.

Answer 1

I'm seeing the same with nx version 14.4.3

Did you see the error when you tried to start webpack dev server, i.e. when you run the "serve" target (e.g. pnpm nx run my-project:serve)?

In my case, the error showed up only for serve target but not for build.

See this issue: #10263 Web dev-server executor should support generateIndexHtml

The reason is, nx will add an IndexHtmlWebpackPlugin only for webpack dev server, and currently there's no option to opt out.

The only workaround is to filter out that IndexHtmlWebpackPlugin in a custom webpack config.

module.exports = (config, options) => {
  // `devServer` only available for `serve` target
  if (options.configuration === 'development' && 'devServer' in config) {
    // Filter out IndexHtmlWebpackPlugin so that we can use HtmlWebpackPlugin
    config.plugins = config.plugins.filter(
      (plugin) => plugin.constructor.name !== 'IndexHtmlWebpackPlugin'
    );
  }

  config.plugins.push(
    new HtmlWebpackPlugin({
      template: '/path/to/index.html',
    })
  );

  return config;
};