Support for the experimental syntax 'jsx' isn't currently enabled

See original GitHub issue

I am using react-app-rewired to configure my CRA project as I was having issues with 2 co-existing versions of React which I’m sure is a very common use-case for react-app-rewired/customize-cra.

Everything has been fine until I required installing react-native-calendars as a dependency. As you can see in my addBabelPlugins config; I have needed to install @babel/plugin-proposal-class-properties to transpile the libraries’ components… I am now however getting an error that complains about JSX in my codebase which I thought would already be handled by CRA in the first place and seeing as we are overwriting/extending CRA with react-app-rewired i didn’t think I would need to add additional plugins/presets such as @babel/preset-react & @babel/plugin-syntax-jsx

can somebody point me in the right direction? I’m hoping this issue is common and I have just searched the issues page poorly.

Thank you

Info

react@17.0.1
react-scripts@3.4.3
customize-cra@1.0.0 
npm@6.14.9
node@14.8.0

Error

Failed to compile.

./src/App.js
SyntaxError: /Users/.../src/App.js: Support for the experimental syntax 'jsx' isn't currently enabled (28:5):

  26 | 
  27 |   return (
> 28 |     <Router>
     |     ^
  29 |       <Switch>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

config-overrides.js

const {
  override,
  addWebpackAlias,
  babelInclude,
  addBabelPresets,
  addBabelPlugins,
} = require('customize-cra');

module.exports = override(
  babelInclude([
    require.resolve('./src'),
    require.resolve('./node_modules/react-native-calendars'),
  ]),
  ...addBabelPresets(
    '@babel/preset-react',
  ),
  ...addBabelPlugins(
    '@babel/plugin-proposal-class-properties', // <~ needed for react-native-calendars
    '@babel/plugin-syntax-jsx',
  ),
  addWebpackAlias({
    react: require.resolve('./node_modules/react'),
  }),
);

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8

github_iconTop GitHub Comments

1reaction
FrancisLeighcommented, Dec 1, 2020

@dawnmist Really appreciate your help. i dug further into react-native-calendar’s lib and found This answer Which seems to be working for me…

Again I appreciate your help 😃

0reactions
dawnmistcommented, Dec 1, 2020

Ok, that makes more sense now - and confirms that you’re doing stuff I don’t have any experience in. 😃

One thing I can suggest after having been poking around in the Babel docs here, is the plugin order might be backwards. It’s failing at the JSX parts, and the plugins run in their defined order - so it might be that the proposal-class-properties plugin doesn’t know what to do with code containing JSX. However, it’s not something I can test here so I don’t know if it’ll cause issues in applying the class properties. Other than that, I’d have to hand off at this point to someone who has a better knowledge of babel.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Support for the experimental syntax 'jsx' isn't currently enabled
Just create a .babelrc file in the root of your project and add: { "presets": ["@babel/preset-env", "@babel/preset-react"] }.
Read more >
Support for the experimental syntax 'jsx' isn't currently enabled ...
Support for the experimental syntax 'jsx' isn't currently enabled after creating a TypeScript react project and installing an NPM package with ...
Read more >
Jest error parsing React jsx files “Support for the experimental ...
Jest error parsing React jsx files “Support for the experimental syntax 'jsx' isn't currently enabled”. I ran into this error adding new Jest ......
Read more >
Expo Support for the experimental syntax 'jsx' isn't ... - Reddit
Hello, why I get the error above in the title if I want test my file ? Intro.js import { StyleSheet, Text, View...
Read more >
Support for the experimental syntax 'jsx' isn't currently enabled
JavaScript : Support for the experimental syntax ' jsx ' isn't currently enabled [ Gift : Animated Search Engine : https://bit.ly/AnimSearch ] ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found