Html-webpack-plugin: webpack@5 output.libraryTarget: "module" and html-webpack-plugin cause compile error

[mizchi]

Expected behaviour

Generate html

Current behaviour

ERROR in   Error: /Users/mizchi/plg/try-microfront/src/index.html:10
  /******/ var __webpack_modules__ = ({
           ^^^
  SyntaxError: Unexpected token 'var'

  - index.js:310 HtmlWebpackPlugin.evaluateCompilationResult
    [try-microfront]/[html-webpack-plugin]/index.js:310:22

  - index.js:230 
    [try-microfront]/[html-webpack-plugin]/index.js:230:22

  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5

  - async Promise.all

  - async Promise.all

Environment

• Node.js v14.7.0 darwin 19.5.0
• [email protected]
• [email protected]
• [email protected]

Config

const HtmlPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  output: {
    libraryTarget: "module"
  },
  plugins: [
    new HtmlPlugin({
      template: path.join(__dirname, "src/index.html")
    })
  ],
  experiments: {
    outputModule: true
  }
}

[MrFoxPro]

How could we fix that?

[miyaokamarina]

Same with experiments.outputModule = true, output.module = true.

node 14.13.0
webpack 5.1.0
html-webpack-plugin 4.5.0

[jantimon]

A workaround might be to use the templateContent option for now - has anyone an idea how we could fix this issue?

[andrew-t-james-hm]

Having the same issue with
webpack 5.3.2
file-loader 6.2.0
```
experiments.outputModule = true
output.libraryTarget = 'module'

[jantimon]

Can you please try if the new html-webpack-plugin@next version works better for you?

[andrew-t-james-hm]

@jantimon That worked, thanks for the heads up on the alpha-version.

[Zaynex]

Using html-webpack-plugin@next, still fail.

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    module: true,
    path: path.resolve(__dirname, 'dist'),
  },
  experiments: {
    outputModule: true
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: "./dist"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false}),
    new HtmlWebpackPlugin({template: path.resolve(__dirname, "src", "index.html")})
  ]
}

"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^5.0.0-alpha.15",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"

[Dylan0916]

The same happened to me
"html-webpack-plugin": "^5.0.0-alpha.15"

[jantimon]

The error is fixed in [email protected] however the inject feature will not add the module attribute to the script tag automatically