I was working on my react application with set up babel. Unfortunately while setting it up using yarn and when I build my bundle.js
file, I run into some problems:
ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-env' from '/Users/react-file/Desktop/indecision'
at Function.resolveSync [as sync] (/Users/react-file/Desktop/indecision/node_modules/resolve/lib/sync.js:89:15)
at resolveStandardizedName (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
at /Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
at Array.map (<anonymous>)
at createDescriptors (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at /Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:283:7
at Generator.next (<anonymous>)
at buildRootChain (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:120:29)
at buildRootChain.next (<anonymous>)
at loadPrivatePartialConfig (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/partial.js:95:62)
at loadPrivatePartialConfig.next (<anonymous>)
at Function.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/partial.js:120:25)
at Generator.next (<anonymous>)
at evaluateSync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:244:28)
at Function.sync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:84:14)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/index.js:41:61)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:151:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:3:103)
at _next (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:194)
at /Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:364
at new Promise (<anonymous>)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:97)
at Object._loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:231:18)
at Object.loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:64:18)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:59:12)
Here's my package.json
:
{
"name": "Box",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"server": "live-server public/",
"build": "webpack --watch",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"live-server": "^1.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"validator": "^13.0.0",
"webpack": "^4.43.0"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"webpack-cli": "^3.3.11"
}
}
Here's my webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}]
}
};file"
And here's my .babelrc
file:
{
"presets": [
"env",
"react"
]
}
Any idea what's wrong with this?
I was working on my react application with set up babel. Unfortunately while setting it up using yarn and when I build my bundle.js
file, I run into some problems:
ERROR in ./src/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-env' from '/Users/react-file/Desktop/indecision'
at Function.resolveSync [as sync] (/Users/react-file/Desktop/indecision/node_modules/resolve/lib/sync.js:89:15)
at resolveStandardizedName (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
at resolvePreset (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
at loadPreset (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
at createDescriptor (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
at /Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
at Array.map (<anonymous>)
at createDescriptors (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at /Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:283:7
at Generator.next (<anonymous>)
at buildRootChain (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/config-chain.js:120:29)
at buildRootChain.next (<anonymous>)
at loadPrivatePartialConfig (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/partial.js:95:62)
at loadPrivatePartialConfig.next (<anonymous>)
at Function.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/partial.js:120:25)
at Generator.next (<anonymous>)
at evaluateSync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:244:28)
at Function.sync (/Users/react-file/Desktop/indecision/node_modules/gensync/index.js:84:14)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/@babel/core/lib/config/index.js:41:61)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:151:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:3:103)
at _next (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:194)
at /Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:364
at new Promise (<anonymous>)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:5:97)
at Object._loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:231:18)
at Object.loader (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:64:18)
at Object.<anonymous> (/Users/react-file/Desktop/indecision/node_modules/babel-loader/lib/index.js:59:12)
Here's my package.json
:
{
"name": "Box",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"server": "live-server public/",
"build": "webpack --watch",
"build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"live-server": "^1.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"validator": "^13.0.0",
"webpack": "^4.43.0"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"webpack-cli": "^3.3.11"
}
}
Here's my webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}]
}
};file"
And here's my .babelrc
file:
{
"presets": [
"env",
"react"
]
}
Any idea what's wrong with this?
Share Improve this question asked May 19, 2020 at 10:35 user12073145user12073145 3-
1
To me it seems like
npm intall
has not run properly. Did you try deletingnode_modules
and installingnpm
afresh? – ABGR Commented May 19, 2020 at 10:37 -
I am using yarn if I delete my node modules should I simply run
yarn install
? – user12073145 Commented May 19, 2020 at 10:47 -
Yup. But before that try installing
@babel/preset-env
, as one of the answers suggest, which might would do the trick. – ABGR Commented May 19, 2020 at 10:50
1 Answer
Reset to default 15You need to install @babel/preset-env
instead of babel-preset-env
.
I believe that most babel modules now live under the @babel
org
Edit:
also IMHO the correct syntax for the babelrc file should be
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
}