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.

[IPWright83]

I'm hitting this issue too, I'm however on Linux and am not using toMatchInlineSnapshot() which others have reported as being the issue.

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import { Button } from "./Button";

describe("Button", () => {
    it("matches snapshot", () => {
        render(<Button onClick={function () {}} />);

        expect(screen.getByText("Click Me")).toBeInTheDocument();
    });
});

This is from a sample project https://github.com/IPWright83/pnpm-monorepo. I don't understand why this is happening now however, as it wasn't an issue when I set the project up originally. It's easy to reproduce in there by running:

npm install -g pnpm
pnpm install
pnpm test

I have managed to workaround it, but it's not nice. I have to, add the .babelrc file from #11928 (comment) and I also need to add the following at the top of every test file:

/**
 * @jest-environment jsdom
 */

[mjlomeli]

bump, same for Mac.

@FezVrasta it wasn't viable for me.

[shridhar-tl]

Same issue happening for me when I try to add a folder with few components from "Project B" to my "Project A" as soft links using "mklink" command. None of the components in this folder has any dependency outside the folder. So their is no possibility that it is trying to refer something from "Project B" which is not available in "Project A" solution

I tried creating .babelrc and babal.config.js in different different formats and none worked. Finally I had to copy paste the files itself directly after which it is working.

[gambowoa]

bump, still haven't been able to resolve this

[ClydeDz]

I'm having the same issue as well. I did create the create-react-app using typescript template, though.

[rubencodes]

Same issue. create-react-app using typescript template.

[kovkev]

I am having the same issue (on Ubuntu) and @space-cadett 's answer I don't think is the solution because this is not about class properties.

[cristian-eriomenco]

I fixed it by adding @babel/plugin-proposal-class-properties into webpack config plugin. The module section of my webpack.config.js looks like this

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,        
        loader: "babel-loader",       
        options: {
          presets: ['@babel/preset-env',
                    '@babel/react',{
                    'plugins': ['@babel/plugin-proposal-class-properties']}]

        }
      },
    ],
  },

What has Class properties do with file extension ?

[kovkev]

Actually... that helped me. Odd.

[darekha]

Getting the same error while importing files from a dependency package where files have the extension .js.

[hashaaan]

Same error. Any update ?

[karkir0003]

I'm also having this same issue. the workaround didn't work for me. Can someone who's a contributor please address this issue and offer example code solution

[stathismor]

I am also hitting the same problem with gatsby. Any help is appreciated.

Compiled with problems:

ERROR in ./node_modules/gatsby/cache-dir/head/head-export-handler-for-browser.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/stathis/src/anarres-frontend-v2/node_modules/gatsby/cache-dir/head/head-export-handler-for-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled (113:9):

  111 |         // Note: In dev, we call onHeadRendered twice( in FireCallbackInEffect and after mutualution observer dectects initail render into hiddenRoot) this is for hot reloading
  112 |         // In Prod we only call onHeadRendered in FireCallbackInEffect to render to head
> 113 |         <FireCallbackInEffect callback={onHeadRendered}>
      |         ^
  114 |           <StaticQueryContext.Provider value={staticQueryResults}>
  115 |             <LocationProvider>
  116 |               <Head {...filterHeadProps(pageComponentProps)} />

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/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 (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
    at instantiate (/home/stathis/src/anarres-frontend-v2/node_modules/@babel/parser/lib/index.js:72:32)
...

[nheanvitou02]

The JSX syntax extension is not currently enabled

script:/Users/vitou/My-doc/Vue/ecommerce/src/layouts/HeaderLayout.vue?id=0:7:8:
  7 │   icon: <tamplate>hi</tamplate>
    ╵         ^

The esbuild loader for this file is currently set to "js" but
it must be set to "jsx" to be able to parse JSX syntax. You
can use "loader: { '.js': 'jsx' }" to do that.

[nheanvitou02]

const routes = [{
id: 1,
name: "Home",
slu: "/",
icon: hi
}]

[tblancog]

Still waiting for a solution on this issue

[EricHasegawa]

Also experiencing the same issue

[MiLandry]

Also having this problem.

[nikoloza]

having the same problem with another React package linked in cra

[t-montes]

I had the same issue.
First check out that you have rendered correctly to an index.js file in a /dist folder, and then check that in the package.json file your main attribute is pointing to the right /dist file, for example:

{
  "name": "react-floating-mailbox",
  "version": "1.0.3",
  "description": "...",
  "main": "dist/index.js", // "dist/index.js" not just "index.js"
}

[Uttam146]

Same issue occur after trying so many solutions no result found

[Uttam146]

I have resolved this issue you can see my code from github https://github.com/Uttam146/uttam_rawat-popups/tree/master/src/package

[tammymogul]

Also having the same issue with another package.

[cassreinhart]

@Uttam146 This worked until babel couldn't parse a css file being imported. I added "type": "module" to package.json but still cannot parse.

[dtJon]

I am having this issue too. I cannot get google-map-react to work after two days of messing around with typescript configs and babel configs

[prodkt]

Same issue persists here. All this time and not anything definitive from CRA?

[sashafirsov]

solved by following jest docs

npm install --save-dev react-test-renderer

after which the Jest Runner VS Code plugin shown the functional Debug Test

The npm run test is functional as well.

[SimonWuensch-It-Studio-Rech]

I solved the problem with a custom transformer -> https://jestjs.io/docs/tutorial-react#custom-transformers

[nheanvitou02]

### Thank you for your email Your query has been received. We will reply back shortly. If you have any additional information, please reply to this mail. Reference: None None This is an automatically generated reply

[amandakoster]

Hello, I am experiencing the same issue:
Support for the experimental syntax 'jsx' isn't currently enabled (80:13):
Am using
npx create-react-app my-app --template typescript
Next.js

I don't want to eject CRA and build out a babel config, bc that's why I like CRA.

Is there a fix for this or is CRA no longer supported?

[amandakoster]

I solved the problem with a custom transformer -> https://jestjs.io/docs/tutorial-react#custom-transformers

Can you share your config? I have tried a few the fixes here and they are not working for my app.
CRA with typescript/react-testing-lib + jest

[amandakoster]

I have resolved this issue you can see my code from github https://github.com/Uttam146/uttam_rawat-popups/tree/master/src/package

Did you use CRA? Did you eject? What are we looking at? Can you give more info? I would love to find a fix for this!