React 17 new JSX Transform: ReferenceError: React is not defined

[Bartmr]

Description

Gatsby 2.28.1 will throw a ReferenceError: React is not defined if React is not imported on top of the file, but the new JSX Transform (built-in in Gatsby since 2.24) supports files with JSX without a React Import.

Steps to reproduce

I couldn't reproduce this in CodeSandbox but you should easily reproduce this by rendering a component that does not import React.

Expected result

Should not throw the error and allow components without a React import to work normally

Actual result

What happened.
It happens in both development and build mode
The output JS file does not have any React reference:

__webpack_require__.r(__webpack_exports__);
/* WEBPACK VAR INJECTION */(function(__react_refresh_utils__) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ExplorerTemplate", function() { return ExplorerTemplate; });
__webpack_require__.$Refresh$.runtime = __webpack_require__(/*! ./node_modules/react-refresh/runtime.js */ "./node_modules/react-refresh/runtime.js");
__webpack_require__.$Refresh$.setup(module.i);

var _jsxFileName = "/home/bartmr/Documents/unnamed-too/client-side/web-app/src/components/templates/explorer/explorer-template.tsx";
function ExplorerTemplate() {
  return /*#__PURE__*/React.createElement("div", {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7,
      columnNumber: 5
    }
  });
}
_c = ExplorerTemplate;

var _c;

__webpack_require__.$Refresh$.register(_c, "ExplorerTemplate");

const currentExports = __react_refresh_utils__.getModuleExports(module.i);
__react_refresh_utils__.registerExportsForReactRefresh(currentExports, module.i);

if (true) {
  const isHotUpdate = !!module.hot.data;
  const prevExports = isHotUpdate ? module.hot.data.prevExports : null;

  if (__react_refresh_utils__.isReactRefreshBoundary(currentExports)) {
    module.hot.dispose(
      /**
       * A callback to performs a full refresh if React has unrecoverable errors,
       * and also caches the to-be-disposed module.
       * @param {*} data A hot module data object from Webpack HMR.
       * @returns {void}
       */
      function hotDisposeCallback(data) {
        // We have to mutate the data object to get data registered and cached
        data.prevExports = currentExports;
      }
    );
    module.hot.accept(
      /**
       * An error handler to allow self-recovering behaviours.
       * @param {Error} error An error occurred during evaluation of a module.
       * @returns {void}
       */
      function hotErrorHandler(error) {
        if (
          false
        ) {}

        if (typeof __react_refresh_test__ !== 'undefined' && __react_refresh_test__) {
          if (window.onHotAcceptError) {
            window.onHotAcceptError(error.message);
          }
        }

        __webpack_require__.c[module.i].hot.accept(hotErrorHandler);
      }
    );

    if (isHotUpdate) {
      if (
        __react_refresh_utils__.isReactRefreshBoundary(prevExports) &&
        __react_refresh_utils__.shouldInvalidateReactRefreshBoundary(prevExports, currentExports)
      ) {
        module.hot.invalidate();
      } else {
        __react_refresh_utils__.enqueueUpdate(
          /**
           * A function to dismiss the error overlay after performing React refresh.
           * @returns {void}
           */
          function updateCallback() {
            if (
              false
            ) {}
          }
        );
      }
    }
  } else {
    if (isHotUpdate && __react_refresh_utils__.isReactRefreshBoundary(prevExports)) {
      module.hot.invalidate();
    }
  }
}
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js */ "./node_modules/@pmmmwh/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js")))//# sourceURL=[module]
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvY29tcG9uZW50cy90ZW1wbGF0ZXMvZXhwbG9yZXIvZXhwbG9yZXItdGVtcGxhdGUudHN4LmpzIiwic291cmNlcyI6WyIvaG9tZS9iYXJ0bXIvRG9jdW1lbnRzL3VubmFtZWQtdG9vL2NsaWVudC1zaWRlL3dlYi1hcHAvc3JjL2NvbXBvbmVudHMvdGVtcGxhdGVzL2V4cGxvcmVyL2V4cGxvcmVyLXRlbXBsYXRlLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaGFzZXJQYWdlIH0gZnJvbSAnc3JjL2NvbXBvbmVudHMvcm91dGluZy9waGFzZXItcGFnZS9waGFzZXItcGFnZSc7XG5cblxuXG5leHBvcnQgZnVuY3Rpb24gRXhwbG9yZXJUZW1wbGF0ZSgpIHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2PjwvZGl2PlxuICApO1xufVxuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFJQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFFQTtBQUpBO0FBQ0E7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBIiwic291cmNlUm9vdCI6IiJ9

Environment

It happens in both development and build mode
It also happens in NodeJS 12

System:
OS: Linux 4.15 Ubuntu 18.04.5 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
Browsers:
Chrome: 87.0.4280.88
npmPackages:
gatsby: ^2.28.1 => 2.28.1
gatsby-image: ^2.7.0 => 2.7.0
gatsby-plugin-manifest: ^2.8.0 => 2.8.0
gatsby-plugin-offline: ^3.6.0 => 3.6.0
gatsby-plugin-react-helmet: ^3.6.0 => 3.6.0
gatsby-plugin-robots-txt: ^1.5.3 => 1.5.3
gatsby-plugin-sass: ^2.7.0 => 2.7.0
gatsby-plugin-sharp: ^2.10.1 => 2.10.1
gatsby-plugin-sitemap: ^2.8.0 => 2.8.0
gatsby-plugin-svgr: 2.0.2 => 2.0.2
gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.18 => 1.1.18
gatsby-source-filesystem: ^2.7.0 => 2.7.0
gatsby-transformer-sharp: ^2.8.0 => 2.8.0
npmGlobalPackages:
gatsby-cli: 2.7.49

Possible solution:

I was able to go around this bug by adding this to gatsby-node.js:

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: '@babel/plugin-transform-react-jsx',
    options: {
      runtime: 'automatic',
    },
  });
};

[nikoladev]

This has been disabled by default because "the ecosystem hasn't adapted yet": #27615

[Bartmr]

@nikoladev At least offer a flag!?

[Bartmr]

@KyleAMathews you can't go around selling that Gatsby has the new JSX Transform and actually having this stated in the React docs and then disable without any warning.

Gatsby is not a personal blog framework. Big companies depend on it

[nikoladev]

@nikoladev At least offer a flag!?

I'm also just a user of Gatsby 🤷‍♀️

You could open up a PR with your proposed flag.

[Bartmr]

@nikoladev ah alright. I already commented all related issues with the solution, but I don't have much time to open a PR and add tests. This is a better job for someone who understands the project. I just left the user side solution

[wardpeet]

@Bartmr have you enabled react-refresh? The biggest architecture issue we're having right now with having a flag for it, plugins like mdx, emotion still need to have the proper /** @jsxImportSource @emotion/react */

[Bartmr]

@wardpeet i do have it enabled, but I do not use any library that needs to mess around with the jsx (like emotion or mdx). Problably should try disabling it. But even if it doesn't work now, it should work in the future since fast refresh is what's planned to be the default.

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[Dan503]

This is still an issue, please don't close. I ran into this today.

[Dan503]

Thanks @Bartmr for the work around. It worked perfectly! 😊

In gatsby-node.js:

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: '@babel/plugin-transform-react-jsx',
    options: {
      runtime: 'automatic',
    },
  });
};