"ReferenceError: URL is not defined" with html-loader v2

[lephuongbg]

Current behaviour 💣

html-webpack-plugin fails to build with html-loader v2 with option {esModule: true} (the default)

Error: /var/app/web/src/admin/index.html:46
  var ___HTML_LOADER_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(340), __webpack_require__.b);
                                   ^
  ReferenceError: URL is not defined
  
  - index.html:46 Object.717
    /var/app/web/src/admin/index.html:46:34
  
  - index.html:88 __webpack_require__
    /var/app/web/src/admin/index.html:88:41
  
  - index.html:145 
    /var/app/web/src/admin/index.html:145:18
  
  - index.html:146 
    /var/app/web/src/admin/index.html:146:12
  
  - index.js:136 HtmlWebpackPlugin.evaluateCompilationResult
    [web]/[html-webpack-plugin]/index.js:136:28
  
  - index.js:333 
    [web]/[html-webpack-plugin]/index.js:333:26
  
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5
  
  - async Promise.all
  
  - async Promise.all

The cause is due to evaluateCompilationResult does not yet pass URL to the eval context, which is newly required by html-loader with {esModule: true}. See v2 release note

html-webpack-plugin/index.js

Line 131 in 74fae99

const vmContext = vm.createContext({ HTML_WEBPACK_PLUGIN: true, require: require, htmlWebpackPluginPublicPath: publicPath, ...global });

Expected behaviour ☀️

html-webpack-plugin builds normally.

Reproduction Example 👾

https://codesandbox.io/s/html-webpack-plugin-5x-alpha-forked-jp75v?file=/webpack.config.js

Environment 🖥

node -e "var os=require('os');console.log('Node.js ' + process.version + '\n' + os.platform() + ' ' + os.release())"
Node.js v14.15.4
linux 5.4.0-65-generic

npm --version
6.14.11

npm ls webpack
webpack@5.21.2

npm ls html-webpack-plugin
html-webpack-plugin@5.0.0

[jantimon]

Thanks for reporting :)

Right now this feature does not exist for the html-webpack-plugin

Would you like to add a pull request for it or sponsor it's development?

[jimblue]

Confirmed, got the same error with images in HTML Template.
It was perfectly working before 2.0.0.

[jantimon]

So the reason for this bug is that we are executing the html-loader result on server side (node ssr) and therefore we run into this issue: webpack/webpack#12589

Unfortunately we don't have an absolute url as the publicPath could be:

• '' (empty string - files are in the same directory)
  new URL('./my-image.png', '') -> Uncaught TypeError: Failed to construct 'URL': Invalid URL
• '/'
new URL('./my-image.png', '/') -> Uncaught TypeError: Failed to construct 'URL': Invalid URL
• '../' (relative path based on publicPath 'auto')
  new URL('./my-image.png', '../') -> Uncaught TypeError: Failed to construct 'URL': Invalid URL

But @alexander-akait is looking into it :)

[jantimon]

The core team is having a similar problem for mini-css-extract-plugin and is trying to find a good solution :)

Once done I'll use the very same solution for the html-webpack-plugin

[jantimon]

@sokra created a pull request which allows working around the issue: webpack/webpack#12695

Once released I am quite confident that we will be able to add support for html-loader 2

[jimblue]

Thank you so much for the update @jantimon ! Peace

[jantimon]

will be fixed with #1607 ( which requires webpack/webpack#12695 )

[jantimon]

html-webpack-plugin@5.2.0 ships with html-loader support 🎉

[jimblue]

Awesome greatjob @jantimon ! Thank you 😄

[atkulp]

Is there a workaround for this in the meantime?

[atkulp]

Is there a workaround for this in the meantime?

Sorry, just updated packages and all is fine!