Webpack compilation fails: unplugin loader prevents html-webpack-plugin from processing HTML files #523
Description
Environment
- platform: all
- unplugin version: 1.16.1
- nodejs: 20.19.2
- package manager: [email protected]
Reproduction
Repo: https://github.com/Loccko/unplugin-webpack-issues/tree/main
To reproduce:
- Clone
npm cinpm run build:webpack
Describe the bug
When using @intlify/unplugin-vue-i18n together with html-webpack-plugin in webpack configuration, the compilation fails with the following error:
Error: Child compilation failed:
Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
* ./node_modules/unplugin/dist/webpack/loaders/load.js
* ./node_modules/html-webpack-plugin/lib/loader.js
You may need an additional loader to handle the result of these loaders.
> <!DOCTYPE html>
...
This error indicates that webpack doesn't know how to process the .html file.
The html-webpack-plugin was added to webpack.config.js specifically to handle .html files.
During compilation, the loader provided by html-webpack-plugin (html-webpack-plugin/lib/loader.js) checks for the presence of other loaders that have processed the .html file before handling it itself.
This occurs in the following code block:
if (allLoadersButThisOne.length > 0 && !force) {
return source;
}Original code: https://github.com/jantimon/html-webpack-plugin/blob/v5.6.3/lib/loader.js#L16
If other loaders are present, html-webpack-plugin doesn't modify the .html file and simply returns its source as-is.
When debugging at this point, you can observe the following:
This shows that unplugin has already invoked its loader for the .html file and not only failed to process it itself, but also prevented html-webpack-plugin from processing it.
You can find more information in the README.md of the provided repository.
Additional context
There is a similar issue reported for unplugin-vue-i18n:
intlify/bundle-tools#222