Html-webpack-plugin: Webpack build fails with module is not defined

Created on 1 Mar 2021  ·  7Comments  ·  Source: jantimon/html-webpack-plugin

Current behaviour 💣

When building with a custom html template the webpack build fails with

module.exports = __webpack_require__.p + "static/media/javascript,__webpack_pu  blic_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;.aed5664e.bin  ";\n' +
      '  ^\n' +
      '  ReferenceError: module is not defined\n' +

Expected behaviour ☀️

Should build successfully

Environment 🖥

Webpack 5.24.0
Html-webpack-plugin 5.2.0

Fix

Removing this line makes it build correctly

https://github.com/jantimon/html-webpack-plugin/blob/main/lib/child-compiler.js#L119

Most helpful comment

If anyone else has this issue, here is a soultion

{
  exclude: [
    /\.html$/,
    /\.(js|jsx|mjs)$/,
    /\.(ts|tsx)$/,
    /\.(vue)$/,
    /\.(less)$/,
    /\.(re)$/,
    /\.(s?css|sass)$/,
    /\.json$/,
    /\.bmp$/,
    /\.gif$/,
    /\.jpe?g$/,
    /\.png$/
  ],
  use: (info) => {
    return info.compiler !== 'HtmlWebpackCompiler' ? [{
      loader: require.resolve('file-loader')
    }]:[]},
  }

All 7 comments

Sorry without more information it's impossible to reproduce or fix the issue..

For some reason this Entry becomes commonjs with module.exports.

Do I need some raw loader?

I assume one of your loader configurations is breaking the build

I will close this and investigate more :)

Was file-loader, but how to exclude data:text/javacript?

If anyone else has this issue, here is a soultion

{
  exclude: [
    /\.html$/,
    /\.(js|jsx|mjs)$/,
    /\.(ts|tsx)$/,
    /\.(vue)$/,
    /\.(less)$/,
    /\.(re)$/,
    /\.(s?css|sass)$/,
    /\.json$/,
    /\.bmp$/,
    /\.gif$/,
    /\.jpe?g$/,
    /\.png$/
  ],
  use: (info) => {
    return info.compiler !== 'HtmlWebpackCompiler' ? [{
      loader: require.resolve('file-loader')
    }]:[]},
  }

Was this page helpful?
0 / 5 - 0 ratings