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
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.
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments