[Bug]: Invalid URL error thrown when using html-loader

[BrinsilElias]

Version

System:
  OS: macOS 14.6.1
  CPU: (8) arm64 Apple M1
  Memory: 121.88 MB / 8.00 GB
  Shell: 5.9 - /bin/zsh
Browsers:
  Chrome: 128.0.6613.113
  Safari: 17.6
npmPackages:
  @rsbuild/core: 1.0.1-beta.15 => 1.0.1-beta.15

Details

Problem

When migrating a project from Webpack to RsBuild, I've encountered an "Invalid URL" error during the build/development process. This issue specifically occurs when using the html-loader in conjunction with rspack.htmlRspackPlugin or html-webpack-plugin. It seems the parsing of src attributes within HTML tags is triggering this error.

Expected Behavior

The build process should complete successfully without any errors, correctly processing the HTML files and resolving the asset paths.

Actual Behavior

An "Invalid URL" error is thrown during the build, indicating an issue with parsing the src attribute in HTML tags.

Reproduce link

https://github.com/BrinsilElias/rsbuild-html-loader

Reproduce Steps

Steps to Reproduce

1. Set up a project using RsBuild with rspack.htmlRspackPlugin or html-webpack-plugin.
2. Include html-loader in the configuration to process HTML files. Within an HTML file, use tags like <img> with src attributes pointing to assets.
3. Run pnpm run build or pnpm run dev

[chenjiahan]

Rsbuild does not support html-loader yet, we will try to support it.

[witsaint]

@chenjiahan Hai, I may know why, html-webpack-plugin or html-webpack-plugin, when executing childCompiler, calls createChildCompiler to copy all parse configurations. Will be set at the same time the module. The parse. Javascript. The url for 'relative', url for the "relative" determines the packaged into independent resources were introduced boundle whether through new url, new url of the resource is a relative path, The root cause is that base is not an absolute path in the new URL(input, base) and an error is reported in vmscript.runInContext. For webpack, only the configuration of parse.javascript is generated in config.js. When the image asset is actually encountered, javasct resources that are not parse.javascript configured will use parse.javascript configuration. Therefore, when childCompiler is executed, only parse.javascript is available, and parse.javascript.url is set to 'relative', so the phenomenon is correct. For rspack, In default.js, the configuration of parse[' javascript/esm | auto '] is initialized. Therefore, when executing childCompiler, only the value of parse.javascript.url is set to 'relative'. parse[' javascript/auto '] is originally configured, and the parse[' javascript/auto '].url is still true, so it will still be a new URL for image resources after compilation

[witsaint]

html-webpack-plugin 或者 html-webpack-plugin，在执行childCompiler的时候，调用 createChildCompiler 会复制所有的parse 配置，同时会设置 module.parse.javascript.url 为 ‘relative’, url 为 ‘relative’决定了资源打包成独立资源被引入 boundle的时候是否通过 new URL，new URL中的资源是相对路径，new URL(input, base)中 base不是绝对路径会在 vmscript.runInContext中报错，这是根本原因。

对于webpack，在config.js中只会生成 parse.javascript的配置，在实际遇到图片的asset时，非parse.javascript配置的javasct资源会使用parse.javascript配置，所以在执行 childCompiler 时，只有parse.javascript,且 parse.javascript.url 被设置为’relative’,所以现象是对的。

对于rspack，在default.js中会初始化parse[‘javascript/esm | auto’]等的配置，所以执行childCompiler的时候只设置了 parse.javascript.url的值为’relative’，parse[‘javascript/auto’] 是之前初始化过的配置，parse[‘javascript/auto’].url 还是 true，所以在编译后 对于图片资源 引入还是会是 new URL, parse部分理解还是不大理解，你看看是不是这个原因。

[chenjiahan]

Thank you for the information! This should be the root cause of the problem.

I will set childCompiler.options.module.parser['javascript/auto']: url: "relative" in the html-rspack-plugin to fix this issue.

@ahabhgk Do you think Rspack should align the default behavior of module.parser['javascript/auto'] with webpack?

[ahabhgk]

It's a bug, we should fix it