So I have endlessly searched the web to fix this issue.
"support for the experimental 'jsx' isn't currently enabled...
Add #babel/preset-react to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx to the 'plugins' section to enable parsing."
So I had tons (like 100) of these as errors, so I altered my .babelrc and .babel.config.js to look like:
{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react',{
'plugins': [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]}]
}
}]}
and the config:
"presets": [
"react",
"#babel/preset-env",
"#babel/preset-typescript",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
Which resolved most of these errors.
However I keep seeing this same error for 5 files -> there are no noticeable differences between these 5 files and the 100's that were throwing the exact same errors before.
Upon the advice of other stack overflow answers and the internet I changed my .babelrc and config.js:
{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-typescript',{
'plugins': [
["#babel/plugin-proposal-decorators", { "legacy": true }],
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-transform-regenerator",
["#babel/plugin-transform-runtime", {helpers: false, regenerator: true}],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]}]
}
}]}
and the config:
"presets": [
"react",
["#babel/preset-env",
{
"targets": {
"esmodules": true,
"node" : "current"
},
}
],
"#babel/preset-typescript",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
[
"#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
I have tried many different combinations of these packages, adding one each time to see if it would build or change anything and nothing changed. I also tried adding #babel/plugin-syntax-jsx to the plugins, but it didn't seem to work either.
I've also tried having the #babel packages into the .babelrc as well, but that didn't work either.
Is there any other packages I can try to include or use? Or settings for the packages that might change it for these files?
EDIT: package.json dependencies include:
"#babel/runtime": "^7.10.4",
"#babel/cli": "^7.10.4",
"#babel/core": "^7.10.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-proposal-decorators": "^7.10.4",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-jsx": "^7.10.4",
"#babel/plugin-transform-runtime": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"core-js": "^3.6.5",
"react": "^16.0.0",
"react-dom": "^16.0.0",
Creating a babel.config.js with this script solve my issue
module.exports = {
presets:[
"#babel/preset-env",
"#babel/preset-react"
]
}
I must have tried tons of different ways. Sharing what worked for me. Do take note of the versions, different versions might need tweaks.
My react project was created using create-react-app (CRA). Now since CRA hides babel and webpack config files and there is no way to modify them, there are basically 2 options:
react eject (which I didn't try. Felt managing all by myself could get bit overwhelming).
Use react-app-rewired to tweak babel configs without having to eject. (I used this)
I additionally used customize-cra. React-app-rewired suggests it for later versions of CRA.
Update scripts and add dev dependencies in package.json:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"docs": "jsdoc -c jsdoc.conf.json"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.10.1",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6",
"#babel/preset-react": "^7.10.1"
}
config-overrides.js (must be at root level, i.e. at same directory level of package.json).
If error is from some library in node_modules, make sure to 'include' it (babelInclude):
const path = require('path');
const {
override,
babelInclude,
addBabelPreset,
addExternalBabelPlugin,
} = require('customize-cra');
module.exports = override(
babelInclude([
path.resolve('src'),
path.resolve('node_modules/react-native-animatable'),
]),
addBabelPreset("#babel/preset-react"),
addExternalBabelPlugin('#babel/plugin-proposal-class-properties'),
);
This is difficult for us backend engineers just starting out with React, iterating on the community's 3 or 4 years' worth of hackish workarounds to fundamental problems with create-react-app. After a whole week of dead-end encounters with deprecated packages and advice, I learned it turns out you don't need react-app-rewired at all.
Here's my answer (hopefully helps others who follow the same google rabbit-hole): define these in your package.json:
"main": "./build/index.js",
"module": "./build/index.js",
"devDependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.13.13",
"commander": "^7.2.0",
...
},
"scripts": {
...
"transpile": "NODE_ENV=production npx babel --out-dir ../build --relative --copy-files src",
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
The npm transpile ; npm publish commands should now work. I found that due to the issue described here by Utku Gultopu, users of yarn will need to do this beforehand to fully upgrade from babel 6 to 7:
npm install #babel/core #babel/cli #babel/preset-react #babel/preset-env
You don't need any of these: webpack.config.js, .babelrc or babel.config.js. Be sure to clear the build subdirectory (and include it in .gitignore) before running either the build (for creating a runtime image) or transpile (for publishing your module library) operations--they are two very different things.
Are you running this inside of a node_modules folder? If so you need to change
exclude: [/node_modules/],
so it doesn't exclude your project.
It should become something along the lines of
exclude: [/node_modules/ &&
!/node_modules\/(project_name)/],
But with correct regex syntax and change project_name to the folder name.
I am putting together a small React App and trying to incorporate MobX into the dependencies. Below is the package.json setup for babel.
"babel": {
"presets": [
"#babel/preset-env",
"react-app"
],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.5"
}
The actual error I get when I start the server is the following:
./src/index.js
Module build failed: ReferenceError: Unknown plugin "#babel/plugin-proposal-
decorators" specified in
"/Users/briankaty1/Desktop/mobx/aquastars/react_aquastars/package.json" at 0,
attempted to resolve relative to
"/Users/briankaty1/Desktop/mobx/aquastars/react_aquastars"
Any help would be greatly appreciated.
When I install Mobx and Mobx react I am getting the following error.
./src/index.js
Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option,
whose value must be a boolean. If you are migrating from Babylon/Babel 6 or
want to use the old decorators proposal, you should use the 'decorators-legacy'
plugin instead of 'decorators'.
Now I have ejected the dependencies and installed the decorators-legacy as a plugin. This is what I have in my package.json file
"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.5"
}
Any help would be appreciated as this has been driving my crazy for the last few days.
As Tholle wrote the link was very helpful. My config in my package.json.
"babel": {
"presets": ["#babel/preset-env","react-app"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
},
"devDependencies": {
"#babel/plugin-proposal-decorators": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.5"
}
I'm trying to migrate a project from using karma, phantomJs to jest, but I cannot get my config files right. I keep getting the following error:
FAIL test/unit/components/SomethingWentWrong/SomethingWentWrong.spec.js
● Test suite failed to run
Cannot find module 'npm:react#16.4.1/index.js' from 'react#16.4.1.js'
> 1 | module.exports = require("npm:react#16.4.1/index.js");
| ^
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
at Object.<anonymous> (jspm_packages/npm/react#16.4.1.js:1:18)
Here is a snoppet with my babel and jest configuration.
... rest of code
"devDependencies": {
"#babel/core": "^7.0.0-beta.56",
"babel-jest": "^23.4.2",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"jest": "^23.4.2",
"react-test-renderer": "^16.4.2"
},
"jest": {
"verbose": true,
"testURL": "http://localhost/",
"transform": {
"^.+\\.(jsx|js)?$": "<rootDir>/node_modules/babel-jest"
},
"collectCoverageFrom": [ "!**/node_modules/**" ]
},
"babel": {
"presets": [
[
"env",
{
"loose": true,
"debug": false,
"targets": {
"browsers": [
"last 3 versions"
]
}
}
],
"react"
]
}
... rest of code
I actually found out what the problem was, since this project is handling dependencies both with jspm and npm for some reason some packages don't get installed even after doing npm install my_package or jspm install npm:my_package. A quick look at the node_folder confirm that the packages were not installed even though they appeared on the package.json
npm cache verified and a new jspm install npm: my_package solved the issue
when I run the test, I get the following error:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
It makes sense, since all the lines of "import React" or "import Enzyme", are marked as an error by ESlint. I don´t know why.
This is my .babelrc file:
{
"presets": [
"react",
"stage-2",
["env", {
"test": {
"presets": ["env", "react", "stage-2"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
},
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
},
"modules": false
}]
]
}
If you are using babel 6 and jest 24 then be informed that jest 24 has dropped support for babel 6.
There are two solutions
Upgrade your app to babel 7. (actively maintained by its developers)
If you don't want to upgrade, make sure that you stick on jest 23.
There is one more work around if you want to use jest 24. Use babel-jest locked at version 23.
"dependencies": {
"babel-core": "^6.26.3",
"babel-jest": "^23.6.0",
"babel-preset-env": "^1.7.0",
"jest": "^24.0.0"
}
Hello dev can you try,
install babel-jest
set this inside .babelrc
"env": {
"test": {
"presets": ["es2015", "react"],
"plugins": ["syntax-object-rest-spread", "transform-es2015-modules-commonjs"]
},
testing with jest