Matt
Reputation: 8942
Parsing error: Cannot find module '@babel/preset-react'
I have a React project. In the first line in every .js file where I import React, I am getting this error: Parsing error: Cannot find module '@babel/preset-react'.
package.json
{
"name": "admin",
"version": "2.0.0",
"description": "",
"author": "",
"main": "index.js",
"engines": {
"node": ">=14.15 <15",
"npm": "~6"
},
"scripts": {
"build-config:local": "CONFIG_ENV=local npm run build-config",
"build-config:dev": "CONFIG_ENV=dev npm run build-config",
"build-config:staging": "CONFIG_ENV=staging npm run build-config",
"build-config:prod": "CONFIG_ENV=prod npm run build-config",
"build-config": "buildconfig --env $CONFIG_ENV",
"build": "npm run build-config && webpack --config ./webpack.config.js --mode production",
"start": "webpack-dev-server --config ./webpack.config.dev.js --mode development"
},
"dependencies": {
"@babel/eslint-parser": "^7.15.7",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
"axios": "^0.21.4",
"axios-progress-bar": "^1.2.0",
"classnames": "^2.3.1",
"clean-webpack-plugin": "^4.0.0",
"copy-text-to-clipboard": "^3.0.1",
"copy-webpack-plugin": "^9.0.1",
"css-loader": "^6.3.0",
"date-fns": "1.30.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"humanize-string": "^2.1.0",
"lodash": "^4.17.21",
"loglevel": "^1.7.1",
"rc-checkbox": "^2.1.7",
"rc-collapse": "^3.1.2",
"rc-switch": "^3.2.2",
"react": "^16.3.0",
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-filter": "^1.3.3",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-dom": "^16.9.0",
"react-helmet": "^6.1.0",
"react-json-tree": "^0.15.0",
"react-router-dom": "^5.3.0",
"react-syntax-highlighter": "^15.4.4",
"sass": "^1.42.1",
"sass-loader": "^12.1.0",
"serialize-error": "^8.1.0",
"single-config": "^2.0.1",
"style-loader": "^3.3.0",
"svg-react-loader": "^0.4.6",
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.19.0",
"prettier": "^2.2.1",
"stylelint": "^13.13.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-recommended": "^5.0.0",
"stylelint-order": "^4.1.0",
"stylelint-prettier": "1.2.0",
"stylelint-scss": "3.19.0",
"webpack-dev-server": "^4.2.1"
}
}
.eslintrc.json
{
"parser": "@babel/eslint-parser",
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier", "prettier/react"],
"plugins": ["react", "import", "jsx-a11y", "prettier"],
"env": {
"es6": true,
"browser": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module",
"ecmaVersion": 6,
"requireConfigFile": false,
"babelOptions": {
"presets": ["@babel/react"]
}
},
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"prettier/prettier": "error",
"consistent-return": "warn",
"no-console": "warn",
"eqeqeq": "error",
"no-alert": "error",
"no-caller": "error",
"no-constructor-return": "error",
"no-else-return": "error",
"no-eq-null": "error",
"no-eval": "error",
"no-extend-native": "error",
"no-extra-bind": "error",
"no-extra-label": "error",
"no-floating-decimal": "error",
"no-implicit-globals": "error",
"no-implied-eval": "error",
"no-iterator": "error",
"no-lone-blocks": "error",
"no-loop-func": "error",
"no-multi-spaces": "error",
"no-multi-str": "error",
"no-new-func": "error",
"no-new-wrappers": "error",
"no-octal-escape": "error",
"no-proto": "error",
"no-return-assign": "error",
"no-return-await": "error",
"no-script-url": "error",
"no-self-compare": "error",
"no-sequences": "error",
"no-throw-literal": "error",
"no-unmodified-loop-condition": "error",
"no-unused-expressions": "error",
"no-useless-call": "error",
"no-useless-concat": "error",
"no-useless-return": "error",
"require-await": "error",
"arrow-body-style": ["error", "as-needed"],
"arrow-spacing": ["error", { "before": true, "after": true }],
"no-duplicate-imports": "error",
"no-useless-constructor": "error",
"no-useless-rename": "error",
"no-var": "error",
"no-useless-computed-key": "error",
"prefer-arrow-callback": "error",
"prefer-const": "error",
"prefer-spread": "error",
"prefer-template": "error",
"rest-spread-spacing": "error",
"symbol-description": "error",
"comma-spacing": ["error", { "before": false, "after": true }],
"key-spacing": "error",
"keyword-spacing": "error",
"max-len": ["error", { "code": 160 }],
"linebreak-style": "error",
"lines-between-class-members": "error",
"new-cap": "error",
"no-multi-assign": "error",
"no-negated-condition": "warn",
"no-nested-ternary": "error",
"no-new-object": "error",
"no-trailing-spaces": "error",
"prefer-object-spread": "error",
"react/prop-types": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }],
"react/sort-comp": [
"error",
{
"order": ["static-variables", "static-methods", "lifecycle", "everything-else", "/^is.+$/", "/^on.+$/", "/^render.+$/", "render"],
"groups": {
"lifecycle": [
"displayName",
"propTypes",
"contextTypes",
"childContextTypes",
"mixins",
"statics",
"defaultProps",
"state",
"instance-variables",
"constructor",
"getDefaultProps",
"getInitialState",
"getChildContext",
"getDerivedStateFromProps",
"componentWillMount",
"UNSAFE_componentWillMount",
"componentDidMount",
"componentWillReceiveProps",
"UNSAFE_componentWillReceiveProps",
"shouldComponentUpdate",
"componentWillUpdate",
"UNSAFE_componentWillUpdate",
"getSnapshotBeforeUpdate",
"componentDidUpdate",
"componentDidCatch",
"componentWillUnmount"
]
}
}
],
"import/no-unresolved": "off",
"import/order": [
"error",
{
"pathGroups": [
{
"pattern": "*.scss",
"group": "object",
"patternOptions": { "matchBase": true },
"position": "after"
},
{
"pattern": "*.svg",
"group": "object",
"patternOptions": { "matchBase": true },
"position": "after"
}
]
}
]
}
}
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
webpack.config.dev.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = () => ({
devServer: {
port: 8084,
historyApiFallback: true, // serves index.html for all routes to avoid 404
hot: true
},
devtool: 'eval-source-map',
stats: 'minimal',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[fullhash].bundle.js',
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [path.resolve(__dirname, 'node_modules')],
include: [path.resolve(__dirname, 'src')],
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.(scss|css)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
quietDeps: true
}
}
}
]
},
{
test: /\.(jpe?g|png|gif|svg)$/,
include: [path.resolve(__dirname, 'src')],
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
useRelativePath: false
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebPackPlugin({
template: './src/index.html',
favicon: './src/assets/favicon/favicon-32x32.png'
})
]
});
Upvotes: 24
Views: 43992
Answers (7)
Alexandre Duros
Reputation: 976
If this appears in VSCode with the fullstack approach (front and back as subfolders within your workspace), adjust eslint extensions configurations for your current workspace in .vscode/settings.json as following:
"eslint.workingDirectories": [
"./back",
"./front"
]
That solved this issue in my case.
Upvotes: 24
snack overflow
Reputation: 184
Removing this line from .eslintrc worked for me
"parser": "@babel/eslint-parser",
Upvotes: 1
Yuksel CELIK
Reputation: 133
Add below code in your webpack.config.js file
Encore
//...
.enableReactPreset()
Upvotes: 0
Wadson Vaval
Reputation: 111
I have been having the same issue. I fixed the issue by removing the
> @babel/eslint-parser // from eslintrc.js to
> babel/eslint-parser
I notice in package.json I have babel/eslint not @bable/eslint
Upvotes: 2
Dan-Lucian
Reputation: 131
Maybe it'll help someone, I just had a simillar problem which I solved.
I happened to have VSCode opened in a fullstack project where front and back were sepparate folders. When I opened VSCode only in the front folder this error faded away.
I guess a solution would be to make a shared node_modules folder or setup a workspace from front and back folders, I went with the 2nd option.
Upvotes: 13
agneska
Reputation: 11
After trying to figure this one out for a few hours, replacing @babel/preset-react with babel-preset-react-app finally worked.
Here's my full package.json (where there might be some mix up between dependencies / dev-dependencies though)
{
"name": "----",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/runtime": "^7.15.4",
"@reduxjs/toolkit": "1.6.2",
"immer": "^9.0.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "7.2.5",
"react-router-dom": "^5.2.1",
"react-scripts": "^5.0.0-next.47",
"redux": "4.1.1",
"redux-thunk": "^2.3.0",
"styled-components": "^5.3.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"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": {
"@types/prop-types": "^15.7.4",
"@types/react": "^17.0.19",
"@types/react-redux": "7.1.19",
"babel-preset-react-app": "*",
"json-loader": "^0.5.7",
"lodash": "^4.17.21",
"prettier": "^2.4.1"
}
}
Upvotes: 0
devabhishekpal
Reputation: 115
Try installing @babel/preset-react explicitly, since someone had told that is isn’t installed by default:
npm install --save-dev @babel/preset-react
Also, in the eslint.json file, you have referred to @babel/react instead of @babel/preset-react under babelOptions.
Upvotes: 5
Related Questions
- Cannot find module babel-preset-es2015
- Module not found: Error: You attempted to import babel-preset which falls outside of the project src/ directory
- Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from
- Error: Failed to load parser 'babel-eslint' declared in '.eslintrc': Cannot find module 'babel-eslint' in create-react-app
- Lint Parsing error: Cannot find module 'babel.config.js'
- [Error]_Cannot find module 'babel-preset-es2015'
- Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'
- build failed due to babelrc, presets[0] [1] must be an object, false or undefined
- Module build failed Cannot find module '@babel/preset-env'
- Couldn't find preset "@babel/env" - reactjs