We Keep Coding

[Error]_Cannot find module 'babel-preset-es2015'

I'm learning to setup Webpack to my React project. Then, I met an error on the Babel setting step when I run this command
npx webpack --config webpack.config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-es2015'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at resolve (internal/modules/cjs/helpers.js:33:19)
at resolveStandardizedName (...\project\node_modules\#babel\core\lib\config\files\plugins.js:111:7)
at resolvePreset (...\project\node_modules\#babel\core\lib\config\files\plugins.js:59:10)
at loadPreset (...\project\node_modules\#babel\core\lib\config\files\plugins.js:78:20)
at loadPreset.next (<anonymous>)
at createDescriptor (...\project\node_modules\#babel\core\lib\config\config-descriptors.js:187:16)
at createDescriptor.next (<anonymous>)
at step (...\project\node_modules\gensync\index.js:261:32)
at evaluateAsync (...\project\node_modules\gensync\index.js:291:5)
More detail, I have some code lines:
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, 'src', 'index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.(jsx|js)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', {
"targets": "defaults"
}],
'#babel/preset-react'
]
}
}]
}
],
}
}
.babelrc
{
"presets": ["es2015", "react"]
}
package.json
{
"name": "react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.16.7",
"#babel/preset-env": "^7.16.7",
"#babel/preset-react": "^7.16.7",
"antd": "^4.17.3",
"babel-loader": "^8.2.3",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"devDependencies": {
"css-loader": "^6.5.1",
"ts-loader": "^9.2.6"
}
}
How can I fix this problem and What is the point of caution?
Thank you very much!

Your problem comes from an incorrect .babelrc file, please look at it closer - you are defining babel to use "2015" preset but your dependencies point that you are using "#babel/preset-env".
The correct replacement for "2015" is "#babel/preset-env" in your case. Read about it more:
https://babeljs.io/docs/en/babel-preset-env
.babelrc
{
"presets": ["#babel/preset-env", "react"]
}

Cannot find module 'html-webpack-plguin' React start

I am trying to create a React app that isn't create-react-app and I am running into some issues. After running npm run start I received the "Cannot find module 'html-webpack-plguin'" error. I know it's installed, as I can see it in the node modules folder. I have tried using both npm install and yarn install for this. I have put in in the devDependencies and the regular dependencies, and neither seems to work. Is there something wrong with my webpack file or package.json?
Here is my webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plguin')
module.exports +{
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
Here is my package.json
{
"name": "reactboilerplate",
"version": "1.0.0",
"description": "React Webpack Redux Babel Boilerplate",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "Thomas Baric",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"webpack": "^4.29.3"
},
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}

Well that was easy lol. Error became clear after seeing it as a title to my question. FML!

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"
}
}

Webpack dev server hot reloading not working with reactjs, though i have done "inline:true"?

Why does Hot Module Replacement stop working on webpack dev server?
My package.json file:
{
"name": "routing-react",
"version": "1.0.0",
"description": "Just a little ReactJS Training Ground",
"main": "index.js",
"scripts": {
"start": "npm run build",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
"build:prod": "cp src/index.html dist/index.html && webpack -p"
},
"keywords": [
"react"
],
"author": "gd10",
"license": "MIT",
"dependencies": {
"css-loader": "^0.28.9",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-hot-loader": "^3.1.3",
"style-loader": "^0.20.1",
"webpack-hot-middleware": "^2.21.0"
},
"devDependencies": {
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
I have also set:
devserver = {
historyApiFallback: true,
inline: true,
hot: true
}
But it didn't helped.
webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var DIST_DIR = path.resolve(__dirname, 'dist');
var SRC_DIR = path.resolve(__dirname, 'src');
var config = {
devServer: {
historyApiFallback: true,
contentBase: './',
inline: true,
hot:true,
port: 3004,
},
entry: SRC_DIR + '/app/index.js',
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
},
{
test: /\.css?/,
loader:'style-loader!css-loader'
},
]
}
};
module.exports = config;
Previously I had CSS loaders issue and after adding loaders in webpack.config.js I got webpack stopped.
how can I make Hot module work?

You need to activate the Hot Module Replacement Plugin, full instructions: https://webpack.js.org/guides/hot-module-replacement/