I’m having issues setting up HtmlWebpackPlugin in a Nuxt 3 app using Webpack 5 builder.
I’m getting an error while attempting this with a simple project. However, I was able to produce a successful build in another Vue project with similar steps (following this answer).
How can one build a successful bundle using HtmlWebpackPlugin in the context of a Nuxt project?
Please provide additional config if necessary for a successful build.
Scenario: Build a single standalone HTML bundle file with all assets inlined and embedded (JS, CSS, images, etc.) to be usable offline, locally and directly in a browser.
How to replicate
Create project and install dependencies:
npx nuxi init nuxt-webpack
cd nuxt-webpack
npm install @nuxt/webpack-builder html-webpack-plugin html-webpack-inline-source-plugin@beta -D
# prevent dependency error with memfs at the time of writing
npm install [email protected] -D
Set nuxt.config.ts as such:
// nuxt.config.ts
import HtmlWebpackPlugin from 'html-webpack-plugin';
import HtmlWebpackInlineSourcePlugin from 'html-webpack-inline-source-plugin';
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
debug: true,
ssr: false, // try with and without
builder: 'webpack',
webpack: {
plugins: [
new HtmlWebpackPlugin({
filename: 'output.html', // output file name that will be created
template: 'output-template.html', // template file to use for insertion
inlineSource: '.(js|css)$', // embed all javascript and css inline
inject: 'body', // inject script at the end of document body
}),
new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
]
},
hooks: {
// may be needed for successful bundling
"webpack:config"(configs) {
// configs[0].module.rules.push(
// {
// test: /.vue$/,
// loader: 'vue-loader',
// },
// {
// test: /.html$/,
// loader: 'html-loader'
// },
// {
// test: /.tsx?$/,
// use: 'ts-loader',
// exclude: /node_modules/,
// },
// {
// test: /.css$/,
// use: ['style-loader', 'css-loader'],
// },
// {
// test: /.(png|jpg|gif|webp|svg)$/,
// loader: 'url-loader',
// },
// );
}
},
});
Add file output-template.html:
<!-- output-template.html -->
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>Nuxt App</title>
</head>
<body>
<div id="__nuxt"></div>
<!-- plugin will insert js here by default -->
</body>
</html>
Run build using npm run generate.
It results in the following error:
ERROR Nuxt Build Error: Nuxt build error
ModuleParseError: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
* ./node_modules/unplugin/dist/webpack/loaders/transform.js
* ./node_modules/html-webpack-plugin/lib/loader.js
* ./node_modules/unplugin/dist/webpack/loaders/transform.js
* ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
> <!-- output-template.html -->
| <!DOCTYPE html>
| <html lang=en>
at handleParseError (node_modules/webpack/lib/NormalModule.js:982:19)
at node_modules/webpack/lib/NormalModule.js:1101:5
at processResult (node_modules/webpack/lib/NormalModule.js:806:11)
at node_modules/webpack/lib/NormalModule.js:866:5
at node_modules/loader-runner/lib/LoaderRunner.js:407:3
at iterateNormalLoaders (node_modules/loader-runner/lib/LoaderRunner.js:233:10)
at iterateNormalLoaders (node_modules/loader-runner/lib/LoaderRunner.js:240:10)
at node_modules/loader-runner/lib/LoaderRunner.js:255:3
at context.callback (node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.transform (node_modules/unplugin/dist/webpack/loaders/transform.js:100:5)
