I ‘ve got a problem with my webpack configuration. After implementing html-webpack-plugin I got an Error, there’s whole error stack from generated index.html.
Error Stack:
Html Webpack Plugin:
Error: Child compilation failed: Conflict: Multiple assets emit to the same filename index.html: Error: Conflict: Multiple assets emit to the same filename index.html
compiler.js:76 [Pre-build]/[html-webpack-plugin]/lib/compiler.js:76:16
Compiler.js:291 Compiler. [Pre-build]/[webpack]/lib/Compiler.js:291:10
Compiler.js:494 [Pre-build]/[webpack]/lib/Compiler.js:494:13
Tapable.js:138 next [Pre-build]/[tapable]/lib/Tapable.js:138:11
CachePlugin.js:62 Compiler. [Pre-build]/[webpack]/lib/CachePlugin.js:62:5
Tapable.js:142 Compiler.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:142:13
Compiler.js:491 [Pre-build]/[webpack]/lib/Compiler.js:491:10
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:645 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:645:19
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:636 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:636:11
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:631 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:631:10
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:627 sealPart2 [Pre-build]/[webpack]/lib/Compilation.js:627:9
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:575 Compilation.seal [Pre-build]/[webpack]/lib/Compilation.js:575:8
Compiler.js:488 [Pre-build]/[webpack]/lib/Compiler.js:488:16
Tapable.js:225 [Pre-build]/[tapable]/lib/Tapable.js:225:11
Compilation.js:477 _addModuleChain [Pre-build]/[webpack]/lib/Compilation.js:477:11
Compilation.js:448 processModuleDependencies.err [Pre-build]/[webpack]/lib/Compilation.js:448:13
next_tick.js:73 _combinedTickCallback internal/process/next_tick.js:73:7
next_tick.js:104 process._tickCallback internal/process/next_tick.js:104:9
My webpack configuration code:
var webpack = require('webpack'),
path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin'),
ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
const sourcePath = path.resolve(__dirname, './src');
const staticPath = path.resolve(__dirname, './static');
module.exports = function (env) {
const nodeEnv = env && env.prod ? 'production' : 'development';
const isProd = nodeEnv === 'production';
const postcssLoader = {
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
const plugins = [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
filename: 'vendor.bundle.js'
}),
new webpack.EnvironmentPlugin({
NODE_ENV: nodeEnv,
}),
new HtmlWebpackPlugin({
template: 'index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
];
if(isProd) {
plugins.push(
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
})
);
} else {
plugins.push(
new webpack.HotModuleReplacementPlugin()
);
}
return {
devtool: isProd? 'source-map' : 'eval',
context: sourcePath,
entry: {
app: './app/entry.ts',
vendor: './app/vendor.ts'
},
output: {
path: staticPath,
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /.html$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
query: {
name: '[name].[ext]'
},
},
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test: /.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /.ts$/,
exclude: /node_modules/,
use: [
'ts-loader'
],
},
],
},
resolve: {
alias: {
Public: path.resolve(__dirname,'src/public'),
Style: path.resolve(__dirname,'src/styles')
},
extensions: ['.ts','.js', '.html'],
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath
]
},
plugins,
performance: isProd && {
maxAssetSize: 100,
maxEntrypointSize: 300,
hints: 'warning'
},
stats: {
colors: {
green: 'u001b[32m'
}
},
devServer: {
contentBase: './src',
historyApiFallback: true,
port: 3000,
compress: isProd,
inline: !isProd,
hot: !isProd,
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
color: {
green: 'u001b[32m'
}
},
}
};
};
I couldn’t find any source of that Error, maybe I am little bit tired, but I would like to finish it up, so I hope for your help guys.
Maybe should I use some raw-loader to load .html(?), which does not make me happy.
Bug report
Since v5.22, build are failing with this error:
ERROR in Error: The loader "/Users/my-user/project/node_modules/html-webpack-plugin/lib/loader.js!//Users/my-user/project/src/app/index.html" didn't return html.
- index.js:336 HtmlWebpackPlugin.evaluateCompilationResult
[ni-xbox2]/[html-webpack-plugin]/index.js:336:24
- index.js:243 Promise.resolve.then
[ni-xbox2]/[html-webpack-plugin]/index.js:243:22
- next_tick.js:68 process._tickCallback
internal/process/next_tick.js:68:7
webpack 5.22.0 compiled with 1 error and 1 warning in 73981 ms
ℹ ｢wdm｣: Failed to compile.
What is the current behavior?
The build are failing, saying that the html file did not return an HTML output.
If the current behavior is a bug, please provide the steps to reproduce.
Upgrade webpack from v5.21 to v5.22, reinstall node_modules and webpack will fail to build the project.
What is the expected behavior?
Webpack should build the project.
Other relevant information:
webpack version: v5.22
Node.js version: v15.8.0
Operating System: MacOs Catalina v10.15.7
Additional tools:
Я могу скинуть вам полноценную настройку webpack , чтобы вы долго не мучились и смогли быстро начать свою разрабутку приложения
/**** package.json ****/
В свойстве devDependencies находятся список установленных пакетов .
npm i -D yourPack
{
"name": "yourProject",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack serve --mode development",
"build": "webpack serve --mode production",
"watch": "webpack serve --mode development --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.2.5",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"node-sass": "^6.0.0",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-loader-plugin": "^1.3.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
}
}/**** webpack.config.js ****/
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
mode:'development',
devtool: false,
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
entry: ["./src/index.js","./src/assets/js/main.js"],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HTMLWebpackPlugin({template: "./src/index.html"}),
new VueLoaderPlugin(),
],
resolve: {
extensions:['.js','.scss','.vue', '.svg', '.png', '.jpg','...'],
alias: {
vue: 'vue/dist/vue.js'
},
},
module: {
rules: [
{
test:/.vue$/,
use: ['vue-loader']
},
{
test: /.scss$/,
use: ['vue-style-loader','style-loader','css-loader','sass-loader'],
},
{
test: /.(jpe?g|png|gif|svg)$/i,
use: [{
loader:'url-loader',
options: {
name: '[name].[ext]',
outPath: './src/assets/imgs',
publicPath: './src/assets/imgs',
emitFile: true,
esModule: false,
}
}]
},
{
test: /.(ttf|woff|woff2|eot)/,
use: ['file-loader'],
},
]
}
}Hello guys, today we will learn about how to fix the error “Cannot find module ‘html-webpack-plugin‘” in JavaScript. The error always appears when trying to use the plugin ‘html-webpack-plugin‘, but we forget to install the plugin in your project. Read to the end of the article. We will show you the cause and how to fix this error.
The cause of this error.
The error “Cannot find module ‘html-webpack-plugin‘” appears when you use the “html-webpack-plugin” plugin in your code but have not installed it before.
Make sure the plugin is installed on your project.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<h1 id="header">LearnShareIT</h1>
<script src="script.js"></script>
</body>
</html>
script.js
// The error will show when you try to use this plugin but not install it yet
const pluginHTML = require("html-webpack-plugin");
// Using the html-webpack-plugin, arrange html files in a certain order
module.exports = {
entry: "script.js",
plugins: [
new pluginHTML({
filename: "index.html",
}),
],
};
console.log(
"The Html-webpack-plugin plugin is used to arrange Html files in a certain order"
);
Output
The error will show if you try to run this code.
Error: Cannot find module 'html-webpack-plugin'To fix this error, you must make sure that the plugin 'html-webpack-plugin' is installed first. After that, we call it out to arrange Html files in a certain order, and it will help to optimize HTML files more.
What is the html-webpack-plugin?
The html-webpack-plugin plugin is used to arrange HTML files in a certain order, helping to optimize the HTML file content more.
The purpose of this plugin is to help webpack automatically generate one or more Html files (advanced) and link modules after build. In addition, it can optimize and use environment variables in the output Html file.
Make sure to install the plugin before using it.
To deal with the error “cannot find module ‘html-webpack-plugin‘”. First, we open the terminal command and run this code
npm i --save-dev html-webpack-plugin
. Then call it out to arrange index.html files in a certain order.
script.js
// The error will show when you try to use this plugin but not install it yet
const pluginHTML = require("html-webpack-plugin");
// Using html-webpack-plugin arrange html files in a certain order
module.exports = {
entry: "script.js",
plugins: [
new pluginHTML({
filename: "index.html",
}),
],
};
console.log(
"The Html-webpack-plugin plugin is used to arrange Html files in a certain order."
);
Output
The Html-webpack-plugin plugin is used to arrange Html files in a certain order. Summary
The error “cannot find module ‘html-webpack-plugin‘ ” in JavaScript occurs when you try to use the html-webpack-plugin plugin, but you did not install it first. You must run the npm i --save-dev html-webpack-plugin code in your terminal command to do it. If you have any questions, Don’t hesitate and leave your comment below.
Thank you for reading!
My name is Fred Hall. My hobby is studying programming languages, which I would like to share with you. Please do not hesitate to contact me if you are having problems learning the computer languages Java, JavaScript, C, C#, Perl, or Python. I will respond to all of your inquiries.
Name of the university: HUSC
Major: IT
Programming Languages: Java, JavaScript, C , C#, Perl, Python
The «Error: Child compilation failed» error message is a common issue that arises when using Webpack and html-webpack-plugin. It occurs when there is a problem with the configuration of Webpack or the compilation process. This error can prevent the generation of a proper output file and hinder the development process. In this article, we will go over several methods to fix the «Error: Child compilation failed» issue and get back to working on your project.
Method 1: Check Webpack Configuration
Here’s how you can fix the «Javascript: how to fix Webpack, html-webpack-plugin, Error: Child compilation failed?» error using the «Check Webpack Configuration» method:
-
First, make sure that you have installed the latest version of webpack and html-webpack-plugin. You can do this by running the following command:
npm install webpack html-webpack-plugin --save-dev -
Next, check your webpack configuration file (usually named webpack.config.js) for any syntax errors or typos. You can use a tool like eslint or jshint to help you with this.
-
Check your webpack configuration for any missing or incorrect plugins. In particular, make sure that you have correctly configured the html-webpack-plugin. Here’s an example configuration:
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] };In this example, we are using the HtmlWebpackPlugin plugin to generate an HTML file based on a template file located at ./src/index.html.
-
Check your webpack configuration for any missing or incorrect loaders. In particular, make sure that you have correctly configured the babel-loader if you are using ES6 or JSX syntax. Here’s an example configuration:
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } } ] } };In this example, we are using the babel-loader to transpile our ES6 and JSX code using the @babel/preset-env and @babel/preset-react presets.
-
Finally, run webpack again and see if the error has been resolved:
If the error persists, try the other methods for fixing this error, such as clearing your webpack cache or updating your dependencies.
That’s it! By following these steps, you should be able to fix the «Javascript: how to fix Webpack, html-webpack-plugin, Error: Child compilation failed?» error using the «Check Webpack Configuration» method.
Method 2: Verify Loader Configuration
If you encounter the «Child compilation failed» error when using Webpack and html-webpack-plugin, you can try to verify your loader configuration to solve the issue. Here are the steps you can follow:
- Check your webpack.config.js file and make sure you have the correct configuration for your loaders. For example, if you are using babel-loader, make sure you have installed it and configured it correctly.
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}- Check your package.json file and make sure you have installed the correct versions of your loaders. For example, if you are using babel-loader, make sure you have installed «@babel/core» and «@babel/preset-env» as dependencies.
"devDependencies": {
"babel-loader": "^8.2.2",
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7"
}- Verify that your loaders are working correctly by running a test build with the «—display-error-details» flag. This will show you the details of any errors that occur during the build process.
webpack --display-error-details- If you still encounter the «Child compilation failed» error, try to isolate the issue by removing some of your loaders or plugins and running a test build. This will help you identify which loader or plugin is causing the issue.
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]- Once you have identified the problematic loader or plugin, try to update it to a newer version or switch to a different loader or plugin that provides similar functionality.
"devDependencies": {
"html-webpack-plugin": "^5.3.2"
}By following these steps, you should be able to fix the «Child compilation failed» error when using Webpack and html-webpack-plugin.
Method 3: Reinstall html-webpack-plugin
One possible solution to fix the «Webpack, html-webpack-plugin, Error: Child compilation failed» issue is to reinstall the html-webpack-plugin. Here are the steps to do so:
- Remove the existing html-webpack-plugin from your project:
npm uninstall html-webpack-plugin- Install the latest version of html-webpack-plugin:
npm install html-webpack-plugin@latest --save-dev- Update your webpack configuration to use the new version of html-webpack-plugin:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
// your options here
}),
// ...
],
// ...
};- Rebuild your project:
This should fix the «Webpack, html-webpack-plugin, Error: Child compilation failed» issue.
Method 4: Upgrade Webpack and html-webpack-plugin
To fix the «Webpack, html-webpack-plugin, Error: Child compilation failed» issue, you can try upgrading your Webpack and html-webpack-plugin versions. Here are the steps to do it:
- Check your current versions of Webpack and html-webpack-plugin:
npm ls webpack html-webpack-plugin- Upgrade Webpack and html-webpack-plugin:
npm install --save-dev webpack@latest html-webpack-plugin@latest- Update your Webpack configuration file with the new version of html-webpack-plugin:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ... other configuration options
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
],
};- Run your Webpack build again:
This should fix the «Webpack, html-webpack-plugin, Error: Child compilation failed» issue by upgrading your Webpack and html-webpack-plugin versions.
Note: If you have other issues with your Webpack build, it may be caused by other factors such as your code or other dependencies.
Method 5: Debug with Webpack-CLI
To debug «Javascript: how to fix Webpack, html-webpack-plugin, Error: Child compilation failed?» with «Debug with Webpack-CLI», follow these steps:
- Install webpack-cli and webpack-dev-server as dev dependencies:
npm install webpack-cli webpack-dev-server --save-dev- Add the following script to your package.json file:
"scripts": {
"start": "webpack serve --mode development --open"
}- Create a webpack.config.js file with the following code:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devtool: 'inline-source-map'
};- Run the following command to start the development server:
- If you encounter the error «Error: Child compilation failed», run the following command to debug with webpack-cli:
webpack --config webpack.config.js --display-error-detailsThis will output detailed error information that can help you identify and fix the issue.
-
If the error is related to html-webpack-plugin, try removing the plugin and running the development server again. Then, slowly add the plugin back in and test after each addition to identify the issue.
-
If the error persists, check your webpack configuration for any other potential issues, such as incorrect entry or output paths, missing dependencies, or syntax errors.
By following these steps and using webpack-cli to debug the issue, you should be able to identify and fix the «Javascript: how to fix Webpack, html-webpack-plugin, Error: Child compilation failed?» error.