Support for the experimental syntax 'jsx' isn't currently enabled (45:5):

[Tordek]

Steps to reproduce:

• Create a new react App
• Add https://github.com/Tordek/broken as a dependency (it's simply a project that contains a file with .js extension but uses jsx syntax.
• Attempt to use the component in the app.

Result:

Failed to compile.

../broken/index.js
SyntaxError: D:\XXXX\broken\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:13):

  2 |
  3 | export const Broken = () => {
> 4 |     return (<div></div>)
    |             ^
  5 | }

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.

However the offered solution does not work because react-scripts/options/webpack.config.js disables the babelrc option.

On the other hand, this problem only seems to exist on Windows; it works fine in Linux.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[Tordek]

Pinging to keep alive.

[FezVrasta]

Having the same issue on mac after I upgraded to Create React App, it's only happening while running the unit tests. But it's not happening because of a dependency, it happens within the app code.

[okhanenko]

@Tordek @FezVrasta
I have the same issue. Did you solve it?

[FezVrasta]

#11928 (includes a workaround I found)

[olamideokunola]

@FezVrasta
Same issue on Ubuntu. I started a new project using npx to call Create React App. I tried importing a component from another local React project and got a similar error message.

[keithpickering]

@Tordek Did you ever resolve this?

[olamideokunola]

No, I had to copy the components into the new project. Very much against DRY principle.

[Tordek]

@keithpickering no, the issue remains and can be reproduced as per the steps in the OP.

[vitolipari]

I have the same issue

[sarbull]

i'm not that happy to join this club 🥇

Support for the experimental syntax 'jsx' isn't currently enabled after creating a TypeScript react project and installing an NPM package with react components created with JavaScript.

[FezVrasta]

If anyone missed it, I provided a workaround for this issue here #11928 (comment)

[123epsilon]

Hi, is there a working solution for this? The workaround above does not work for me, I am using react-native-maps which uses fragments and triggers the error.