Create-react-app: Eslint complaining about React not imported when using JSX

[otaviobps]

I updated React to v17.0.0 and React-Scripts to v3.4.4, then I ran the npx react-codemod update-react-imports to remove all import React from react.

I added the

{
  // ...
  "rules": {
    // ...
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

to my eslint configuration, however React is failing to compile due to

Line 102:9: 'React' must be in scope when using JSX react/react-in-jsx-scope

I've noticed that eslint is complaining about this:

const drawer = (
        <div>
            <div className={classes.toolbar}>
                <Link to="/dashboard" onClick={handleDrawerToggle}>
                    <Grid container alignItems="center" justify="center">
                        <Grid item>
                            <Logo width={155} height={32} style={{ margin: 20 }} />
                        </Grid>
                    </Grid>
                </Link>
            </div>
            {userState.referral && (
                <div>
                    <Button
                        variant="contained"
                        color="secondary"
                        className={referralClasses.button}
                        onClick={handleReferralButton}
                        startIcon={<RedeemIcon />}
                    >
                        <div>
                            <Typography variant="body1">{t('Win $10 discount!')}</Typography>
                            <Typography className={referralClasses.subText}>
                                {t('Invite your friends and earn on their first order')}
                            </Typography>
                        </div>
                    </Button>
                </div>
            )}
            <List>
                <MenuItem name={t('Activity')} path="/dashboard" src={activity} onClick={handleDrawerToggle} />
                <MenuItem name={t('Send money')} path="/dashboard/sendmoney" src={money} onClick={handleDrawerToggle} />
                <MenuItem name={t('Orders')} path="/dashboard/orders" src={order} onClick={handleDrawerToggle} />
                <MenuItem
                    name={t('Recipients')}
                    path="/dashboard/recipients"
                    src={recipients}
                    onClick={handleDrawerToggle}
                />
                <MenuItem name={t('Coupons')} path="/dashboard/giftcards" src={gift} onClick={handleDrawerToggle} />
                <LanguageMenu />
            </List>
        </div>
    );

Which then I use the drawer const in the return:

return (
        <DrawerLayout open={dashboardState.open} openDrawer={openDrawer} handleDrawerToggle={handleDrawerToggle}>
            {drawer}
        </DrawerLayout>
    );

If I import React in this file, then it compiles successfully, but I think it should compile anyway

[n3tr]

As I know, supporting React 17 with a new JSX transform will come in CRA v4, since removing React from scope requires the new JSX transformation which is not available in v3.

For override eslint config, you probably need to pass EXTEND_ESLINT=true yarn start to make CRA use your provided config. However, I believe we will see a compilation error ReferenceError: React is not defined because the lack of the new JSX transform.

[Maskedman99]

Follow the steps mentioned in https://github.com/facebook/create-react-app/issues/9850 to fix the issue

[AndrewHawes]

What's happening (I think) is that Eslint is configured by CRA's webpack config to use Eslint's cache, so even if you change the Eslint rules, it will continue to give you the same error (even with EXTEND_ESLINT set to true) because it's not even checking the file again.

If you go to line 345 of node_modules/react-scripts/config/webpack.config.js in your project, you can change cache: true to cache: false. This should fix it and cause Eslint to run again with your updated configuration, which will eliminate the error.

I think you can also just change your file where it's showing you you have an error. Add or remove anything, and it should relint the file. But I think it's probably easier to just turn Eslint caching off for now, since if you have it on and your files end up in a state that's already been linted, Eslint will go back to using the cache and bring back the errors that would have been there for your configuration when you first linted it.

[iansu]

The new JSX transform that allows you to skip importing React is not available in Create React App v3. It is supported in v4, which is currently available in alpha and will be officially released very soon.