I am using babel and Webpack first time to build a react app. Since morning I am trying, uninstalled and reinstalled packages many many times but babel gives one or other error when try to start server
I may have read all related questions on this platform but couldn't find solution that works.
This is how my webpack.config.js looks like:
var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, 'src/index.js') ,
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/src/'
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html',
inject: 'body'
}), // Generates default index.html
// new HtmlWebpackPlugin({ // Also generate a test.html
// filename: 'test.html',
// template: 'src/assets/test.html'
// })
],
devServer: {
contentBase: "./public",
hot: true
},
module: {
rules: [
{
test: /.js$/,
loader: 'babel-loader',
query: {
presets: ['#babel/react', '#babel/es2015'],
plugins: ['#babel/proposal-class-properties']
}
}
]
}
};
package.json:
{
"name": "ondemnd-web",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-core": "7.0.0-bridge.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.6.2",
"#babel/core": "^7.6.2",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/preset-env": "^7.6.2",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.0.0",
"babel-jest": "^24.9.0",
"babel-loader": "^7.1.5",
"html-webpack-plugin": "^3.2.0",
"regenerator-runtime": "^0.13.3",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.8.2"
}
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
Error:
ERROR in (webpack)/buildin/global.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/preset-es2015' from 'C:\repos\ondemandProject\ondemnd-web'
at Function.module.exports [as sync] (C:\repos\ondemandProject\ondemnd-web\node_modules\resolve\lib\sync.js:74:15)
at resolveStandardizedName (C:\repos\ondemandProject\ondemnd-web\node_modules\#babel\core\lib\config\files\plugins.js:101:31)
at resolvePreset (C:\repos\ondemandProject\ondemnd-web\node_modules\#babel\core\lib\config\files\plugins.js:58:10)
at loadPreset (C:\repos\ondemandProject\ondemnd-web\node_modules\#babel\core\lib\config\files\plugins.js:77:20)
at createDescriptor (C:\repos\ondemandProject\ondemnd-web\node_modules\#babel\core\lib\config\config-descriptors.js:154:9)
at items.map (C:\repos\ondemandProject\ondemnd-web\node_modules\#babel\core\lib\config\config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (C:\repos\ondemandProject\ondemnd-web\node_modules\#babel\core\lib\config\config-descriptors.js:109:29)
at createPresetDescriptors (C:\repos\ondemandProject\ondemnd-web\node_modules\#babel\core\lib\config\config-descriptors.js:101:10)
at passPerPreset (C:\repos\ondemandProject\ondemnd-web\node_modules\#babel\core\lib\config\config-descriptors.js:58:96)
# ./node_modules/lodash/lodash.js 1:0-41
# ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html
babel-error
In node_modules also, no matter how many times I try to reinstall preet-es2015, I don't see the package. Plus, in the document https://babeljs.io/docs/en/v7-migration it states that The "env" preset has been out for more than a year now, and completely replaces some of the presets we've had and suggested earlier.
babel-preset-es2015
babel-preset-es2016
babel-preset-es2017
babel-preset-latest
A combination of the above ^
These presets should be substituted with the "env" preset.
#babel/preset-es2015
Not sure how to solve this problem
If anyone else is running into this issue, this can be fixed by uninstalling #babel/preset-es2015 completely. This is replaced by #babel/preset-env
Related
Trying to build this by "npm run build" but getting this error:
ERROR in ./src/index.js 9:2
Module parse failed: Unexpected token (9:2)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const root = ReactDOM.createRoot(document.getElementById('root'));
| root.render(
<React.StrictMode>
|
| </React.StrictMode>
webpack 5.75.0 compiled with 1 error in 349 ms
**webpack.config.js :
**
const port = process.env.PORT || 8080;
const path = require("path");
module.exports = {
output: {
path: path.join(__dirname, "/dist"),
filename: "main.[fullhash].js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
devServer: {
host: "localhost",
port: port,
historyApiFallback: true,
open: true,
},
};
**.babelrc : **
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [["#babel/transform-runtime"]]
}
package.json
{
"name": "webpack",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/runtime": "^7.20.6",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "webpack serve --mode production --open --hot",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.20.5",
"#babel/plugin-transform-runtime": "^7.19.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
I have webpack and babel loader installed, however, webpack is unable to recognise that Babel Loader is installed:
I installed babel loader and the presets using the following command: npm install #babel/core babel-loader #babel/preset-react --save-dev
Here is my
webpack.config.js:
const path = require('path')
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react'],
},
},
],
},
}
module.exports = config
and package.json:
{
"name": "webpack",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack --mode=development",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"install": "^0.13.0",
"npm": "^8.13.2",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}
Your Webpacks Babel module rule object has a wrong structure. Please, follow the Webpack official docs and wrap your 'loader' and 'options' properties in a 'use'.
Wrong rules:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react'],
},
},
],
},
Correct rules:
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react']
}
}
}
]
}
I have an issue that I'm spending a lot of time to seek a solution.
Previously my project was build by CRA and used react-scripts. Test script was working. For test I used react-testing-library (now implemented to react by default).
Actually it has changed and now app is built by webpack. I tried to implement jest and test, but I cannot configure it in proper way.
I tried:
install jest and babel-jest
add jest.config.js / jest.config.json
But still jest is sending me this information:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Error shows whenever it meets React syntax
it("renders without crashing", () => {
6 | const div = document.createElement("div")
> 7 | ReactDOM.render(<App/>, div)
| ^
8 | })
My webpack config:
let path = require("path")
module.exports = {
entry: {
app: "./src/index.js",
},
output: {
filename: "[name].js",
path: path.resolve(process.cwd(), "name/static/js"),
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
},
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
}
package.json
{
"name": "app-name",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/user-event": "^7.1.2",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"formik": "^2.1.4",
"json-server": "^0.16.1",
"lodash": "^4.17.15",
"react": "^16.13.0",
"react-input-mask": "^2.0.4",
"react-simple-timefield": "^3.0.0",
"reactstrap": "^8.4.1",
"yup": "^0.28.3"
},
"scripts": {
"test": "jest",
"start-dev": "webpack --progress --colors --watch --config webpack.dev.js",
"build": "webpack --progress --colors --config webpack.prod.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 1 edge version"
]
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-transform-react-jsx": "^7.9.4",
"#babel/preset-env": "^7.9.0",
"#babel/preset-react": "^7.9.4",
"#testing-library/dom": "^7.1.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"babel-jest": "^25.5.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.4.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest": "^25.5.0",
"react-dom": "^16.13.1",
"react-snapshot": "^1.3.0",
"react-test-renderer": "^16.13.1",
"style-loader": "^1.1.3",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-merge": "^4.2.2"
}
}
},
My purpose is to be available to run tests with this configuration.
I found solution here: https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples
as I script in package.json it should be just "test": "jest" and add in package.json
"babel": {
"presets": [
"react-app"
]
},
There is a need to create new file jest.config.js with code:
const path = require('path')
module.exports = {
roots: [path.resolve(__dirname, './src')],
testEnvironment: 'jest-environment-jsdom-sixteen',
displayName: 'tests',
testMatch: ['**//__tests__/**/*.js', '**/?(*.)+(spec|test).[jt]s?(x)'],
testURL: 'http://localhost',
setupFilesAfterEnv: [path.resolve(__dirname, './src/setupTests.js')],
}
My test files are in src/__ tests __/ folder and they have extension .test.js (i.e. app.test.js)
Add file setupTests.js, which contains:
import '#testing-library/jest-dom/extend-expect'
After that install jest-environment-jsdom-sixteen and babel-preset-react-app.
At last npm test should work and run all tests contained in __test__ folder.
I'm new in ReactJs. Now I'm developing a small project using reactJs and I'm trying to configure with Webpack. but getting following error. I'm not sure how to handle this? I tried with some solution but not worked for me?
webpack.config
var path = require('path');
var hwp = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')
},
module:{
rules:[{
exclude: /node_modules/,
test: /\.(js|jsx)$/,
loader: 'babel-loader',
query: {
presets: [,'#babel/preset-env','#babel/preset-react','#babel/preset-es2015'],
plugins: ['#babel/proposal-class-properties','#babel/plugin-proposal-object-rest-spread']
}
}]
},
plugins:[
new hwp({template:path.join(__dirname, '/public/index.html')})
]
}
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-es2015"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread"
]
}
package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"main": "index.js",
"dependencies": {
"node-sass": "^4.12.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"reactstrap": "^8.0.0"
},
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/plugin-proposal-class-properties": "^7.5.5",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-es2015": "^7.0.0-beta.53",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.39.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2",
"webpack-merge": "^4.2.1"
}
}
The problem is, when i hit npm start it brings me an error and the page displayed empty:
Error
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/preset-es2015' from 'D:\projects\React\sample\demo'
at Function.module.exports [as sync] (D:\projects\React\sample\demo\node_modules\resolve\lib\sync.js:74:15)
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 1.39 KiB {0} [built]
[./node_modules/lodash/lodash.js] 528 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i 「wdm」: Failed to compile.
I am trying to get another project into our a new project by importing it as a node module. I get the following error message:
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in ./src/index.js 8:16
Module parse failed: Unexpected token (8:16)
You may need an appropriate loader to handle this file type.
| import * as serviceWorker from './serviceWorker';
|
> ReactDOM.render(<App />, document.getElementById('root'));
|
| module.hot.accept();
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]
ℹ 「wdm」: Failed to compile.
As far as I know, this has something to do with wrong settings in the webpack.config.js, .babelrc oder the package.json. I saw that many more people had this problem and I tried to follow the constructions that I saw in the answer, but none of it worked for me. Now I ended up with the following files that still result into this error. No matter what I do, the error just doesn't go away:
package.json:
{
"name": "mysecondapp-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"myfirstapp-react": "^2.1.2",
"jquery": "^3.3.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router": "^4.4.0-beta.1"
},
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --open --mode development",
"build": "webpack --mode build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.3",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"react-hot-loader": "^4.6.3",
"react-svg-loader": "^2.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
}
}
.babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
webpack.config.js: (this might look a bit messy since I edited a lot in order to localize the error)
const path = require("path");
const webpack = require('webpack');
module.exports = {
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
},
module: {
rules: [
{
test: /\.js(x)$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
},
{
test: /\.(css|less)$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.svg$/,
loaders: [
'babel-loader',
{
loader: 'react-svg-loader',
query: {
jsx: true
}
},
]
}
]
},
};
I fixed the issue by changing:
test: /\.js(x)$/
to
test: /\.jsx$/