Support for the experimental syntax 'jsx' isn't currently enabled
See original GitHub issueI 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:
- Created 3 years ago
- Comments:8
Top Related StackOverflow Question
@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 😃
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.