Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new JSX transformer not supported #7

Open
kevinfaveri opened this issue Jan 13, 2021 · 11 comments
Open

new JSX transformer not supported #7

kevinfaveri opened this issue Jan 13, 2021 · 11 comments
Labels
enhancement New feature or request

Comments

@kevinfaveri
Copy link

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 #6

@pradel
Copy link
Owner

pradel commented Jan 13, 2021

Looks like it's not supported by esbuild for now, see: evanw/esbuild#334

@kevinfaveri
Copy link
Author

Maybe if we can use the --inject option (evanw/esbuild#334 (comment)) with this plugin, it could work?

@pradel
Copy link
Owner

pradel commented Jan 13, 2021

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
Copy link
Owner

pradel commented Mar 4, 2021

@vviikk
Copy link
Contributor

vviikk commented Mar 4, 2021

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
Copy link
Owner

pradel commented Mar 4, 2021

@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
Copy link

Awea commented May 20, 2021

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 👌

@vjsingh
Copy link

vjsingh commented Jul 13, 2022

@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
Copy link
Owner

pradel commented Jul 20, 2022

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 evanw/esbuild#2349 to be merged in esbuild.

@rgembalik
Copy link

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
Copy link

@pradel any updates here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

7 participants