Environment
- platform: all
- unplugin version: 1.16.1
- nodejs: 20.19.2
- package manager: npm@10.8.2
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
Logs
Environment
Reproduction
Repo: https://github.com/Loccko/unplugin-webpack-issues/tree/main
To reproduce:
npm cinpm run build:webpackDescribe the bug
When using
@intlify/unplugin-vue-i18ntogether withhtml-webpack-pluginin webpack configuration, the compilation fails with the following error:This error indicates that webpack doesn't know how to process the
.htmlfile.The
html-webpack-pluginwas added towebpack.config.jsspecifically to handle.htmlfiles.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:
Original code: https://github.com/jantimon/html-webpack-plugin/blob/v5.6.3/lib/loader.js#L16
If other loaders are present,
html-webpack-plugindoesn't modify the.htmlfile 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
Logs