Gatsby: WebpackError: ReferenceError: React is not defined

[mikaelkristiansson]

Description

Since update of gatsby version ^2.24.86 the error React is not defined started to occur when following the new jsx transformer setup: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#gatsby

Here is the changes since the latest working version:
https://github.com/gatsbyjs/gatsby/compare/[email protected]

Steps to reproduce

Just run a gatsby app without import React from 'react'; in any files and run any version above 2.24.85

Expected result

should work with the new jsx transform

Actual result

WebpackError: ReferenceError: React is not defined

Environment

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.7.0 - ~/.nvm/versions/node/v14.7.0/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.7.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 81.0.2
    Safari: 14.0
  npmPackages:
    gatsby: 2.24.86 => 2.24.86
    gatsby-i18n: ^1.1.8 => 1.1.8
    gatsby-image: ^2.4.21 => 2.4.21
    gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5
    gatsby-plugin-google-tagmanager: ^2.3.16 => 2.3.16
    gatsby-plugin-manifest: ^2.4.36 => 2.4.36
    gatsby-plugin-polyfill-io: ^1.1.0 => 1.1.0
    gatsby-plugin-react-helmet: ^3.3.14 => 3.3.14
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
    gatsby-plugin-remove-trailing-slashes: ^2.3.13 => 2.3.13
    gatsby-plugin-sass: ^2.3.21 => 2.3.21
    gatsby-plugin-sharp: ^2.6.43 => 2.6.43
    gatsby-plugin-sitemap: ^2.4.17 => 2.4.17
    gatsby-source-contentful: ^3.0.5 => 3.0.5
    gatsby-transformer-sharp: ^2.5.20 => 2.5.20

[mikaelkristiansson]

not sure if this could be it, but I noticed a new rollup config was created in gatsby-cli package and it has set the plugin @babel/preset-react but I think maybe it needs to be:

["@babel/preset-react", {
      "runtime": "automatic"
}]

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-cli/rollup.config.js#L60

Currently, the old transform ("runtime": "classic") is the default option. To enable the new transform, you can pass {"runtime": "automatic"} as an option

[mikaelkristiansson]

I created a custom babel.config.js and set it like this:

module.exports = api => {
    const isTest = api.env('test');

    return {
        presets: [
            [
                '@babel/env',
                {
                    // use ES modules for rollup and commonjs for jest
                    modules: isTest ? `commonjs` : false,
                    shippedProposals: true,
                    targets: {
                        node: '10.13.0',
                    },
                },
            ],
            [
                '@babel/preset-react',
                {
                    runtime: 'automatic',
                },
            ],
        ],
        plugins: ['@babel/plugin-transform-runtime'],
    };
};

and this worked, so the problem is the setup with @babel/preset-react.

[mikaelkristiansson]

ok so I found that you disabled the feature: https://github.com/gatsbyjs/gatsby/pull/27615
maybe this info should be presented somewhere since according to react this should be working by default?