background

TypeScript/Reactプロジェクトに@emotion/reactの導入を進めており、その際の理想の設定としてcompilerOptions.jsxをreactからreact-jsxに変えるというのがある。

この変更が何を指しているのか、変更に伴うリスクはあるかを理解したい

Hirotaka Miyagi 2022/07/06

compilerOptionsのjsxとは

"react" の場合はJSXが React.createElement に変換され、 "react-jsx" の場合は _jsx に変換される。
それによりReactのimportが不要になるとのこと。

_jsx について理解する必要がありそう

Hirotaka Miyagi 2022/07/06

_jsx はreact/jsx-runtimeからimportされ、このimport文は コンパイラが自動挿入する
"react-jsx" と "react-jsxdev" があり、development環境でのデバッグが容易になる
少しだけバンドルサイズの削減が期待できる

公式ドキュメント
eslint-plugin-reactを使用している場合、react/jsx-uses-reactおよびreact/react-in-jsx-scopeルールは不要になるためoffにした方が良い
npx react-codemod update-react-imports で不要なReactのimportを削除できる

Hirotaka Miyagi 2022/07/07

環境によって "react-jsx" と "react-jsxdev" を切り替える

webpackのts-loaderを利用している場合、一番手っ取り早いのはwebpack.config.js内で分岐するのが簡単そうだ。

  {
    test: /\.tsx?$/,
    exclude: 'node_modules',
    use: {
      loader: 'ts-loader',
      options: {
        compilerOptions: {
          jsx:
            process.env.NODE_ENV === 'development'
              ? 'react-jsxdev'
              : 'react-jsx',
        },
      },
    },
  },

ref: https://github.com/facebook/create-react-app/issues/10025#issuecomment-892754278

Hirotaka Miyagi 2022/07/07

ネット上では切り替えたことによって挙動が変わったみたいな事例は見つけられなかった
取り急ぎ grep -l "_jsxDEV(" dist/* で React.createElementから_jsxDEVに切り替わっていることを確認

Hirotaka Miyagi 2022/07/14

リリース後特に大きな問題はなさそうだ

Hirotaka Miyagi 2022/07/15

import React from 'react' の削除

npx react-codemod update-react-imports で一括で削除できる
eslint-plugin-reactのルールがバッティングするので、これはオフにする

module.exports = {
  extends: [
    // 省略
    "plugin:react/jsx-runtime",
  ],