Although React 17 doesn’t contain new features, it will provide support for a new version of the JSX transform. In this post, we will describe what it is and how to try it.

React 17 から新しい jsx の変換方法がサポートされたことにより、import React from 'react' をコード内に含める必要がなくなった。

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

しかし import React from 'react' を取り除いたところ、"ReferenceError: React is not defined" といったエラーに遭遇したので解決策をメモしていく。

Babel の設定更新

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#manual-babel-setup

@babel/plugin-transform-react-jsx もしくは、@babel/preset-react (@babel/plugin-transform-react-jsx が含まれている) を babel で使用している場合の対応をメモ。

Currently, the old transform {"runtime": "classic"} is the default option. To enable the new transform, you can pass {"runtime": "automatic"} as an option to @babel/plugin-transform-react-jsx or @babel/preset-react:

{ "runtime": "automatic" } を設定してあげれば OK

• @babel/plugin-transform-react-jsx を使用しているケース
• @babel/preset-react を使用しているケース

それぞれの具体的な手順はこちら↓

@babel/plugin-transform-react-jsx を使用しているケース

@babel/core, @babel/plugin-transform-react-jsx package を最新に更新

npm update @babel/core @babel/plugin-transform-react-jsx

.babelrc を更新。{ "runtime": "automatic" } を追加。

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "runtime": "automatic"
    }]
  ]
}

@babel/preset-react を使用しているケース

@babel/core, @babel/preset-react package を最新に更新

npm update @babel/core @babel/preset-react

.babelrc を更新。{ "runtime": "automatic" } を追加。

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

tsconfig の jsx compiler option について

こちらの記事がわかりやすい↓

https://zenn.dev/uhyo/articles/react17-new-jsx-transform#typescriptの設定

自分の場合は、jsx の変換は babel で行っているため preserve を指定。

{
  "compilerOptions": {
    // ...
    "jsx": "preserve",
    // ...
  }
}

ESLint で "'React' must be in scope when using JSX" が出た場合

'React' must be in scope when using JSX

react/react-in-jsx-scope が error を出している状態。

When Not To Use It

If you are using the new JSX transform from React 17, you should disable this rule by extending react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends").

と、記載があるように、React 17 以降は disable すべき。

対処方法

eslint config の extends に plugin:react/jsx-runtime を加えればOK

module.exports = {
  extends: [
    // ...
+    'plugin:react/jsx-runtime'
  ],
   
   // ...
};