new JSX transformer not supported

[kevinfaveri]

Basically, the new JSX transformer is not supported (it is not required to import React from react anymore)

So we have this error: ReferenceError: React is not defined

Reference: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Probably related to https://github.com/pradel/create-react-app-esbuild/issues/6

[pradel]

Looks like it's not supported by esbuild for now, see: https://github.com/evanw/esbuild/issues/334

[kevinfaveri]

Maybe if we can use the --inject option (https://github.com/evanw/esbuild/issues/334#issuecomment-711150675) with this plugin, it could work?

[pradel]

Maybe we can make this work with this option yes, just wondering how it will behave if you have mixed files with existing imports or non-existing imports.

[pradel]

A way to do it could be to use this approach to inject React https://medium.com/react-weekly/never-import-react-from-react-again-thanks-to-webpack-s-provideplugin-69e7feb69e#.d5netgw5a

[vviikk]

A way to do it could be to use this approach to inject React https://medium.com/react-weekly/never-import-react-from-react-again-thanks-to-webpack-s-provideplugin-69e7feb69e#.d5netgw5a

@pradel - Would this also work with mixed files as you said?

[pradel]

@vviikk Good question, I guess we will have to try to get an answer ahah.

If it's not then, enabling this functionality under a flag can be a temporary option until we find a better way. We could also recommend to the user to set an eslint rule that would throw if you import react or something like this.

[Awea]

Hi there!

I encountered the issue React is not defined so I ended updating craco.config.js like this:

const CracoEsbuildPlugin = require('craco-esbuild');
const { ProvidePlugin } = require('webpack');

module.exports = {
    webpack: {
      plugins: [
        new ProvidePlugin({
          React: 'react',
        })
      ]
    },
    plugins: [
      { plugin: CracoEsbuildPlugin }
    ]
};

And now it works :ok_hand:

[vjsingh]

@pradel are there any plans to support this officially? This config seems to be working for us for now.

Also thank you for maintaining this library!

[pradel]

Using this is a workaround and is not actually using the new JSX transformer from my understanding. Before closing this one we should wait for https://github.com/evanw/esbuild/pull/2349 to be merged in esbuild.

[rgembalik]

Hey, so what's the status of the issue? The related fix was merged to esbuild as far as I can see.

I am asking, because I am having a problem with tests - while the build passes successfully, caco test throws a React is not defined error. Even after adding the hotfix to the config, my tests aren't working correctly. It's worth mentioning though, that the build passes normally and produces a correct output.

[kaiofelipejs]

@pradel any updates here?