Reactを自作しようとしたときに"pragma and pragmaFrag cannot be set when runtime is automatic."のエラーが出たのでその対応方法を書いていく

最近、Reactの中身をちゃんと理解せねばと思い、Reactの自作につながるような勉強をしています。

一応下に備忘録を残していっていますが、個人用のメモみたいなレベルなので、あまり見やすくはないと思います。
うまく成果を得られたらQiitaかZennにまとめようと思っていますが、どうなることやら...

shinshin86.hateblo.jp

下記のドキュメントを参照しながら進めているのですが、"pragma and pragmaFrag cannot be set when runtime is automatic."というエラーが出て、
「コード同じなのになんでだろう？」
と少しばかり悩んだのでその時の解決方法などを書いていきます。

Build your own React

下は上の翻訳記事。

Reactを自作しよう

"pragma and pragmaFrag cannot be set when runtime is automatic."の発生原因

問題のコードは下記です。

ここはbableがjsxをトランスパイルした後に、 Didact.createElement で処理が行われます。
(この説明だけだと意味がわからないと思うので、上に貼った記事を読んでみてください)

/** @jsx Didact.createElement */
const element = (
  <div style="background: salmon">
    <h1>Hello World</h1>
    <h2 style="text-align:right">from Didact</h2>
  </div>
);

この処理自体はなんの問題もないのですが、この記事の中での環境はReact v16です。

現在、最新バージョンのReactはv17となっているのですが、実はReact 17だとこれは解釈できず、"pragma and pragmaFrag cannot be set when runtime is automatic."というエラーを吐きます。

検証手順

下記のCodeSandboxは上のドキュメント内で実際に提示されているCodeSandboxのコードです。

didact-2 - CodeSandbox

これは現在通常通り動いていますが、CodeSandbox上で Dependencies として設定されているライブラリのすべてを最新にアップデートすると、この事象が発生します。

react 16.8.6 → 17.02
react-dom 16.8.6 → 17.02
react-scripts 3.0.1 → 4.0.3

これを解決する手立ては、下記のissueにありました。

React 17 + new JSX transform + JSX pragma/pragmaFrag · Issue #2041 · emotion-js/emotion · GitHub

ここに記載されている記述を参照して、下記のようにコメント部分を修正することでエラーが解消されます。

/** @jsxRuntime classic */
/** @jsx Didact.createElement */
const element = (
  <div style="background: salmon">
    <h1>Hello World</h1>
    <h2 style="text-align:right">from Didact</h2>
  </div>
);