Html webpack plugin error child compilation failed

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Child compilation failed: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): no such file or directory, open #9934

Error: Child compilation failed: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): no such file or directory, open #9934

i: bug i: needs triage outdated A closed issue/PR that is archived due to age. Recommended to make a new issue

Comments

Bug Report

Whenever I run npm start my react app will compile but it will not display any content on the webpage.

Html Webpack Plugin: Error: Child compilation failed: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): Error: ENOENT: no such file or directory, open '/mnt/c/Users/Eli22/OneDrive/Desktop/College/2018 - 2019 Senior/Spring 2019/CMSC389N/class/sandbox/test-react-app/p ublic/index.html': Error: ENOENT: no such file or directory, open '/mnt/c/Users/Eli22/OneDrive/Desktop/College/2018 - 2019 Senior/Spring 2019/CMSC389N/class/sandbox/test-react-app/p ublic/index.html' - compiler.js:141 childCompiler.runAsChild [test-react-app]/[html-webpack-plugin]/lib/compiler.js:141:18 - Compiler.js:306 compile [test-react-app]/[webpack]/lib/Compiler.js:306:11 - Compiler.js:630 hooks.afterCompile.callAsync.err [test-react-app]/[webpack]/lib/Compiler.js:630:14 - Hook.js:154 AsyncSeriesHook.lazyCompileHook [test-react-app]/[tapable]/lib/Hook.js:154:20 - Compiler.js:627 compilation.seal.err [test-react-app]/[webpack]/lib/Compiler.js:627:30 - Hook.js:154 AsyncSeriesHook.lazyCompileHook [test-react-app]/[tapable]/lib/Hook.js:154:20 - Compilation.js:1325 hooks.optimizeAssets.callAsync.err [test-react-app]/[webpack]/lib/Compilation.js:1325:35 - Hook.js:154 AsyncSeriesHook.lazyCompileHook [test-react-app]/[tapable]/lib/Hook.js:154:20 - Compilation.js:1316 hooks.optimizeChunkAssets.callAsync.err [test-react-app]/[webpack]/lib/Compilation.js:1316:32 - Hook.js:154 AsyncSeriesHook.lazyCompileHook [test-react-app]/[tapable]/lib/Hook.js:154:20 - Compilation.js:1311 hooks.additionalAssets.callAsync.err [test-react-app]/[webpack]/lib/Compilation.js:1311:36 

I noticed that there is a space in ‘public’ on the 3rd line (where it looks like ‘p ublic’) but I cannot find where this path is being created.

The text was updated successfully, but these errors were encountered:

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: Child compilation failed: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): #1205

Error: Child compilation failed: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): #1205

Comments

Whenever I run npm start my react app will compile but it will not display any content on the webpage.

Html Webpack Plugin: Error: Child compilation failed: Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): Error: ENOENT: no such file or directory, open '/mnt/c/Users/Eli22/OneDrive/Desktop/College/2018 - 2019 Senior/Spring 2019/CMSC389N/class/sandbox/test-react-app/p ublic/index.html': Error: ENOENT: no such file or directory, open '/mnt/c/Users/Eli22/OneDrive/Desktop/College/2018 - 2019 Senior/Spring 2019/CMSC389N/class/sandbox/test-react-app/p ublic/index.html' - compiler.js:141 childCompiler.runAsChild [test-react-app]/[html-webpack-plugin]/lib/compiler.js:141:18 - Compiler.js:306 compile [test-react-app]/[webpack]/lib/Compiler.js:306:11 - Compiler.js:630 hooks.afterCompile.callAsync.err [test-react-app]/[webpack]/lib/Compiler.js:630:14 - Hook.js:154 AsyncSeriesHook.lazyCompileHook [test-react-app]/[tapable]/lib/Hook.js:154:20 - Compiler.js:627 compilation.seal.err [test-react-app]/[webpack]/lib/Compiler.js:627:30 - Hook.js:154 AsyncSeriesHook.lazyCompileHook [test-react-app]/[tapable]/lib/Hook.js:154:20 - Compilation.js:1325 hooks.optimizeAssets.callAsync.err [test-react-app]/[webpack]/lib/Compilation.js:1325:35 - Hook.js:154 AsyncSeriesHook.lazyCompileHook [test-react-app]/[tapable]/lib/Hook.js:154:20 - Compilation.js:1316 hooks.optimizeChunkAssets.callAsync.err [test-react-app]/[webpack]/lib/Compilation.js:1316:32 - Hook.js:154 AsyncSeriesHook.lazyCompileHook [test-react-app]/[tapable]/lib/Hook.js:154:20 - Compilation.js:1311 hooks.additionalAssets.callAsync.err [test-react-app]/[webpack]/lib/Compilation.js:1311:36 

I noticed that there is a space in ‘public’ on the 3rd line (where it looks like ‘p ublic’) but I cannot find where this path is being created.

The text was updated successfully, but these errors were encountered:

Источник

How to fix webpack, html-webpack-plugin, error: child compilation failed in Javascript?

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

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' >) ] >;

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:

1. 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'] > > > ] >

1. 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" >

1. 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

1. 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' >) ]

1. 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:

npm uninstall html-webpack-plugin

npm install html-webpack-plugin@latest --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports =  // . plugins: [ new HtmlWebpackPlugin( // your options here >), // . ], // . >;

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:

npm ls webpack html-webpack-plugin

npm install --save-dev webpack@latest html-webpack-plugin@latest

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports =  // . other configuration options plugins: [ new HtmlWebpackPlugin( template: './src/index.html', filename: 'index.html', >), ], >;

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:

npm install webpack-cli webpack-dev-server --save-dev

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' >;

1. 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-details

This will output detailed error information that can help you identify and fix the issue.

1. 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.
2. 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.

Источник