30

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",
meh
  • 401
  • 1
  • 4
  • 5
  • 9
    Did you solve this issue ? I am also facing the same issue right now – Narendra Chouhan Aug 12 '20 at 06:42
  • 3
    Someone solved this issue? – Mat.Now Aug 21 '20 at 23:20
  • 2
    any luck with this? i still haven't made any progress on this. – justelouise Sep 19 '20 at 04:00
  • faced the same issue, changing the path to run jest and switch back solves the issue for me. example first I encountered the issue with `npx jest paht/to/test/file.js` I did change the path then run the command again. It seems like jest caching somehow. not sure – Jing May 10 '21 at 10:35
  • I ended up making a webpack.config.file that used module.exports = {.....module: {rules: [... formatting. Much like Drews first answer below with the babel.config.js. From my understanding the export helps expose the config. https://www.tutorialsteacher.com/nodejs/nodejs-module-exports#:~:text=The%20module.exports%20or%20exports%20is%20a%20special%20object,object%20that%20will%20be%20exposed%20as%20a%20module. – meh Jul 03 '21 at 04:08

4 Answers4

20

Creating a babel.config.js with this script solve my issue

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
Drew Cordano
  • 962
  • 9
  • 16
  • 1
    Good to know that it worked for you, but why is it the right solution (which it isn't for me at least), where did you find it, probably a source would help to understand the problem instead of just copy and pasting a solution. – Ingo Steinke Apr 14 '21 at 16:26
  • This worked for me when deploying a Hugo static website that I had with Netlify starter template. I was also getting the same error. – Zaheer Baloch Apr 19 '21 at 21:24
  • I made a webpack.config.js, but the real importance seems to be the module.exports. I know that helps expose the config as a module, and I guess that is needed behind the scenes. – meh Jul 03 '21 at 04:10
  • I am following a book of tutorials and even on github the book's latest code doesn't have a babel.config.js file at all. But simply adding the file to my project root directory and pasting in the above solution has solved the problem for me. I'd like to knwo then what the difference between babelrc, babel.config.js is? – Rin and Len Sep 06 '21 at 11:44
  • Aaand I found the REAL issue: I had named my babelrc without the period: `.babelrc` I then deleted the contents of babel.config.js and my project still builds with ǹpm start` "dot"babelrc contains this `{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "current" } } ], "@babel/react" ] }` It finally dawned on me that .bashrc, vimrc, et al are all hidden files, so by definition babelrc should be too. – Rin and Len Sep 06 '21 at 11:49
  • i added .babelrc with code same as the answere – romanown Jun 05 '22 at 15:39
4

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.

Rich Braun
  • 51
  • 1
3

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'),
);
gmaster
  • 174
  • 1
  • 15
-2

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.

David Buck
  • 3,752
  • 35
  • 31
  • 35
Tijl
  • 1
  • 1