background

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

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

Hirotaka Miyagi

compilerOptionsのjsxとは

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

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

Hirotaka Miyagi

_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

環境によって "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

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

Hirotaka Miyagi

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

Hirotaka Miyagi

import React from 'react' の削除

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

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