npx create-react-app の危険性

npx は npm パッケージをインストールせずに実行できる便利コマンドで、npm バージョン5.2.0 から追加された機能です。

React 環境構築を Webpack 手書きとかすると死ぬほどしんどいので、世の中の大半の React 解説記事ではセットアップで手を抜くために、create-react-app というツールを npx や yarn 経由で起動して、環境を構築しています。

npx create-react-app --template typescript proj あるいは yarn create react-app --template typescript proj で proj というディレクトリに、React のプロジェクトが作成されます。

これはとても説明に便利で、ブログや書籍を書く人にとって大切なものですが、一つ致命的な問題があります。

create-react-app や --template typescript にバグがあった場合、セットアップに失敗してしまうのです。

これは、なかなかに悩ましい問題です。大抵の場合はエラーもなく動作しますが、ときどき手順が失敗しえるのです。

この問題が生じて数日間で、ワークアラウンドは色々登場しましたが、それらも、react-scripts のアップデートで不要のものになりました。

とりあえず今回何が起こったかを解説します。

create-react-app 4.0.0 の悪夢

npx create-react-app --template typescript hoge
cd hoge
npm run start

を実行すると、

      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'

というエラーが出ていたのです。

ちなみに、このバグは、create-react-app及びreact-scriptsのバージョンが4.0.0かつ、インストールされる TypeScript が 4.1.0 以後じゃないと発生しないという、とてもピンポイントなものです。このバグが生じていた期間はせいぜい3・4日とかその程度です。

TypeScript 4.1.0 で JSX 処理が変わったのが原因です。

2020年11月24日現在、このバグは修正され、上記手順でインストールをしても特に問題は生じません。

どうすべきなのか？

• こういうことが生じる確率は極めて低いため「気にしない」
• 動作したときのバージョンを明記する

くらいしかいい対処法がないような気がします。

CI のようなものを用意して、自分が記事で書いたもののサンプルをいつでもビルド可能かどうか自動化するのは、さすがに大げさすぎますし。

なんとも、悩ましい問題です。

みなさんはなにかいい解決方法を思いつくでしょうか？