We Keep Coding

Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in

I have a problem using the html-webpack-plugin. I am learning React, and I need to use html-webpack-plugin, but when I run it in developer mode, I have this error:
Error: Child compilation failed:
Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/react-shop'
ModuleNotFoundError: Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/ react-shop'
at /home/paolo/develop/react-shop/node_modules/webpack/lib/Compilation.js:2016:28
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:798:13
at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js: 33:10), :10:1)
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:270:22
at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js: 33:10), :9:1)
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:541:15
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:116:11
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:612:8
at /home/paolo/develop/react-shop/node_modules/neo-async/async.js:2830:7
at done (/home/paolo/develop/react-shop/node_modules/neo-async/async.js:2925:13)
- Compilation.js:2016
[react-shop]/[webpack]/lib/Compilation.js:2016:28
- NormalModuleFactory.js:798
[react-shop]/[webpack]/lib/NormalModuleFactory.js:798:13
- NormalModuleFactory.js:270
[react-shop]/[webpack]/lib/NormalModuleFactory.js:270:22
- NormalModuleFactory.js:541
[react-shop]/[webpack]/lib/NormalModuleFactory.js:541:15
- NormalModuleFactory.js:116
[react-shop]/[webpack]/lib/NormalModuleFactory.js:116:11
- NormalModuleFactory.js:612
[react-shop]/[webpack]/lib/NormalModuleFactory.js:612:8
- async.js:2830
[react-shop]/[neo-async]/async.js:2830:7
- async.js:2925 done
[react-shop]/[neo-async]/async.js:2925:13
- child-compiler.js:169
[react-shop]/[html-webpack-plugin]/lib/child-compiler.js:169:18
- Compiler.js:551 finalCallback
[react-shop]/[webpack]/lib/Compiler.js:551:5
- Compiler.js:577
[react-shop]/[webpack]/lib/Compiler.js:577:11
- Compiler.js:1196
[react-shop]/[webpack]/lib/Compiler.js:1196:17
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[react-shop]/[tapable]/lib/Hook.js:18:14
- Compiler.js:1192
[react-shop]/[webpack]/lib/Compiler.js:1192:33
- Compilation.js:2787 finalCallback
[react-shop]/[webpack]/lib/Compilation.js:2787:11
- Compilation.js:3092
[react-shop]/[webpack]/lib/Compilation.js:3092:11*
`
I have already installed the plugin. This is my webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development',
resolve: {
extensions: [ '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: {
loader: 'HtmlWebpackPlugin',
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html'
})
]
}
This is my package.
{
"name": "react-shop",
"version": "1.0.0",
"description": "react eshop",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open",
"build": "webpack --mode production"
},
"keywords": [
"react",
"javascript"
],
"author": "Josue Quichca <josuelml28#hotmail.com>",
"license": "MIT",
"dependencies": {
"#babel/core": "^7.20.2",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1"
}
}
I am learning. Please help!

Try this:
Remove html-webpack-plugin from your package.json
rm -rf node_modules
npm cache clean -f
npm i html-webpack-plugin --save-dev

"loose": true is not fixing Support for the experimental syntax 'classProperties' isn't currently enabled

Support for the experimental syntax 'classProperties' isn't currently
enabled
I tried the solutions still get the error after re building.
Support for the experimental syntax 'classProperties' isn't currently enabled
package.json
{
"name": "blahmodule",
"version": "1.0.0",
"description": "a fetch module for our project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "./node_modules/.bin/babel src --out-file index.js"
},
"peerDependencies": {
"react": "^16.6.6",
"react-dom": "^16.6.3",
"axios": "^0.19.0"
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"axios": "^0.19.0"
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}

I am using plugin-proposal-class-propterties and it works, here is my JSON configuration file .babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{"loose": true}
]
]
}

Try making a file babel.config.js and using module.exports to export the configuration. I also believe you don't require the loose option:
babel.config.js:
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: ["#babel/plugin-proposal-class-propterties"]
};

you must install
npm install #babel/core #babel/plugin-proposal-class-properties
#babel/preset-env #babel/preset-react babel-loader
and
change entry and output
const path = require('path')
module.exports = {
entry: path.resolve(__dirname,'src', 'app.js'),
output: {
path: path.resolve(__dirname, "public","dist",'javascript'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', {
"targets": "defaults"
}],
'#babel/preset-react'
],
plugins: [
"#babel/plugin-proposal-class-properties"
]
}
}]
}
]
}
}

React build error: Module build failed (from ./node_modules/babel-loader/lib/index.js):

I am following along with a tutorial and when I try to build react I get an error.
Module build failed (from ./node_modules/babel-loader/lib/index.js)
5 | ReactDOM.render(
> 6 | <App />,
| ^
7 | document.getElementById('root')
8 | );
I found similar issues and I tried to fix the issue based on this but to no avail.
This is my webpack.config.js:
module.exports = {
entry: './index.js',
output:{
path: __dirname,
filename: 'bundle.js'
},
module:{
rules:[
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: '/node_modules/'
}
]
}
}
Below I have package.json, the "devDependencies" are what I have found in previous solutions.
{
"name": "rtsupport",
"version": "1.0.0",
"description": "Realtime support frontend",
"main": "./index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"develop": "webpack --mode development --watch",
"build": "webpack --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"node": "^10.15.2",
"react-dom": "^16.8.4"
},
"devDependencies": {
"#babel/core": "^7.0.0-bridge.0",
"babel": "^5.8.23",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"react": "^16.8.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}
These are my initial "devDependencies"
"devDependencies": {
"#babel/core": "^7.3.4",
"babel": "^5.8.23",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5"
}
My Node version is: v11.10.1
After trying the suggestions with:
rules:[
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
use: [
{ loader: 'babel-loader' }
]
}
]
I still get the same error.

This problem can be solved by setting each babel dependencies
>=7.8.7
"devDependencies": {
"#babel/cli": "^7.13.10",
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.13.10",
"#babel/preset-react": "^7.12.13",
}

ok I think your webpack test needs to include .js files if you plan to use JSX in them:
test: /\.(js|jsx)$/

After a full day of hacking and surfing this site I found a solution.
module:{
rules:[
{
test: /\.jsx?$/,
exclude: '/node_modules/',
loader: 'babel-loader',
query:
{
presets:['react']
}
}
]
}
And the package.json partial:
"devDependencies": {
"#babel/core": "^7.3.4",
"babel": "^5.8.23",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^7.0.2",
"react": "^16.8.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}

with that config you are telling to only "translate" .jsx files, and since you main file is index.js, he is not loading it, try adding this config:
with this you add js and jsx file to be resolved by your loader
rules: [
{
exclude: /node_modules/,
test: /\.js|.jsx?$/,
use: [
{ loader: 'babel-loader' }
]
}
]
my fault i thought you had a babelrc, i forgot you can create a file on same folder level as your wepback.config with ".babelrc" name and here you can specify your loading config, and tell babel to load "react" plugin
{
"presets": [
"stage-0",
"react",
"es2015"
],
"plugins": [
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-rest-spread",
"transform-es2015-destructuring"
],
"env": {
"debug": true
}
}

Fetch is not working with babel loader in webpack

I am trying to make an ajax request using fetch to an api. When I run npm build I get this error
ERROR in ./src/js/index.js 14:7
Module parse failed: Invalid regular expression flag (14:7)
You may need an appropriate loader to handle this file type.
| document.body.appendChild(c);
|
> fetch(/api/post/read.php)
| .then(res => res.json())
| .then((data) => {
my webpack config -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app:'./src/js/index.js',
test:'./src/js/test2.js'
},
devtool: 'source-map ',
devServer: {
contentBase: './dist',
compress: true,
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
title: 'Menu',
template: './src/views/index.ejs',
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.jsnpm$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/preset-env']
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
};
and my package.json -
{
"name": "menu",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"author": "aioy",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
}
}
What other module do I have to add so that I can make use fetch? I am using fetch to access a local api server in the same directory as my front end webpack files, could this be causing the issue too?

webpack autobuild/auto serve application

i am using this webpack project template from here
to run it i use npm run serve .how can I add auto build/serve when files are changed. is it something to do with webpack or npm? .i am new to this javascript tooling & searching on google gives lots of options which is overloaded with information & configurations each different.
attaching the webpack config:
const path = require('path')
const webpack = require('webpack')
module.exports = env => {
return {
entry: {
main: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: "/"
},
mode: env && env.production ? 'production' : 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: [/\.vert$/, /\.frag$/],
use: 'raw-loader'
}
]
},
devServer
: {
contentBase: './dist'
},
plugins: [
new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true)
})
]
}
}
my package.json file:
{
"name": "phaser3-webpack",
"version": "1.0.0",
"description": "A basic Phaser 3 starter project",
"main": "index.js",
"scripts": {
"build": "webpack",
"build:production": "webpack --env.production",
"clean": "rimraf dist/bundle.js",
"watch": "webpack --watch",
"serve": "webpack-dev-server"
},
"keywords": [
"phaser",
"webpack",
"es6"
],
"author": "John Cheesman",
"license": "MIT",
"dependencies": {
"phaser": "^3.1.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"webpack-dev-server": "^3.0.0"
}
}