Fail to compile on web "Support for the experimental syntax 'jsx' isn't currently enabled"

[bennyxguo]

Package version: 7.0.8 React version: 18.2.0

I am using babel in my project, when I added react-native-shaow-2 package. The project runs fine on IOS and Android. But running on web will result in the following error.

I have tried lowering the package version to 7.0.x and 6.0.6. Still result in this error.

I tried to create a bare-minimum react-native-web project, and added react-native-shadow-2. It produces the same error.

I have checked all the babel setup is correct, I have tried adding the plugin instead, still no luck.

[SrBrahma]

Hi, this is apparently a problem is your babel/webpack/maybe typescript setup. It's failing to convert the library's jsx to js. You would have the same problem with other libraries that also have jsx in their bundle files.

I believe I can not provide further help.

Edit: although, I may change the output to js instead of jsx.

https://stackoverflow.com/a/67086430

[bennyxguo]

Hey @SrBrahma, thanks for the reply. Yes you are right, I just had to make sure babel parse the package. By default our project exclude all node_modoules for babel. Just had to add this package to the exception.

Just leave the solution here incase anyone else face the same problem.

In webpack config.

    // Here we exclude all the packages from node_modules from using `babel-loader`
    // However some packages still need the babel loader to parse the source code
    // Therefore we need to add them to the exclude exception like so:
    // exclude: /node_modules\/(?!(MY-MODULE|ANOTHER-ONE)\/).*/,
    config.module.rules.push({
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules\/(?!(react-native-shadow-2)\/).*/,
      use: {
        loader: "babel-loader",
      },
    });

[SrBrahma]

If you or someone else want to do this, I would happily accept a PR that adds babel/vite to the library building step to transpile the jsx to js to skip the step you made.