CODEWITHSUNDEEP
reactjscreate-react-appreact-app-rewiredcustomize-cra
Francis Leigh
Francis Leigh

Reputation: 1960

customize-cra - Support for the experimental syntax 'jsx' isn't currently enabled

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

[email protected]
[email protected]
[email protected] 
[email protected]
[email protected]

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'),
  }),
);

Original issue here

Upvotes: 0

Views: 1517

Answers (2)

Francis Leigh
Francis Leigh

Reputation: 1960

This answer fixed my issue.

Hopefully, this helps someone else facing this issue!

Upvotes: 1

fl-web
fl-web

Reputation: 460

Replace jsx config option in jsconfig.json/tsconfig.json like this:

{
  "compilerOptions": {
    ...
-   "jsx": "react-jsx"
+   "jsx": "react"
  }
}

I found that here. And more info about jsconfig is here:

Upvotes: 0

Related Questions