Create React Appは役割を終えました

長らくReactの入門キットとして使われてきたCreact React App（CRA）

https://create-react-app.dev/

2023年春に正式版になった新しいReactの公式ドキュメントでは、選択肢として紹介されていません。

https://react.dev/learn/start-a-new-react-project

標準から外れたとは言え、まだ一定の役割は担えるのだろうかと思い様子を見てみました。

とりあえず試してみる

まずは現状確認のために実際にプロジェクトを作ってみます。

$ npx create-react-app cra --template typescript

Creating a new React app in /Users/nekoya/src/github.com/nekoya/ggg/cra.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1426 packages in 11s

226 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...

added 52 packages, and changed 2 packages in 3s

235 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1478 packages in 2s

235 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created cra at /Users/nekoya/src/github.com/nekoya/ggg/cra
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can't go back!

We suggest that you begin by typing:

  cd cra
  npm start

Happy hacking!

うーん、

6 high severity vulnerabilities

不安になるやつが出てますね…

一時的なものかもしれないので、具体的に何がどうなっているのかを見ましょう。

$ npm audit
# npm audit report

nth-check  <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts@2.1.3, which is a breaking change
node_modules/svgo/node_modules/nth-check
  css-select  <=3.1.0
  Depends on vulnerable versions of nth-check
  node_modules/svgo/node_modules/css-select
    svgo  1.0.0 - 1.3.2
    Depends on vulnerable versions of css-select
    node_modules/svgo
      @svgr/plugin-svgo  <=5.5.0
      Depends on vulnerable versions of svgo
      node_modules/@svgr/plugin-svgo
        @svgr/webpack  4.0.0 - 5.5.0
        Depends on vulnerable versions of @svgr/plugin-svgo
        node_modules/@svgr/webpack
          react-scripts  >=2.1.4
          Depends on vulnerable versions of @svgr/webpack
          node_modules/react-scripts

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

react-scriptsが古いwebpackに依存していて、そこからの間接依存で最終的に警告が出てそうです。

issueは立っていますが、openされて既に2年が経過しています。

https://github.com/facebook/create-react-app/issues/11174

打ち捨てられていないのは立派だけど、根本的な解決は簡単ではなさそうです。

セキュリティ警告は出るけど、動作自体はします。いつものやつが出てくる。

ドキュメントから落ちた経緯をたどる

新しい公式ドキュメントでCRAをViteに置き換えたPullRequestを見てみましょう。

https://github.com/reactjs/react.dev/pull/5487

のっけからConversation 195が表示されて大作の予感がしますが、スクロールしていくと

267 hidden itemsまじかよ。PullRequestでやる議論じゃないだろと思いながら掘り起こしていくと、今年1月に投下されたdan先生のクソデカお気持ちが埋もれていました。

https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741

ここでは

We are currently leaning towards Option 5 ("Turn Create React App into a launcher")

とCRAはランチャにしたい旨が示唆されていますが、現実はそうなっていません。実際には、

Option 3: Deprecate Create React App, suggest React frameworks

これと近しい形になっています。

いずれにせよ、このPRでのコメントの流れを見れば見るほど「CRAの時代は終わったのだなぁ」との思いが強くなってきます。

後継としてのVite

なお、先のPRでは「フレームワークだけでなく最初の一歩としてはシンプルなVite構成がCRAの後継として適切だろう」みたいな声も多く見られますが、結局のところ（少なくとも現時点では）Viteは一段下の扱いを受けています。

既存プロジェクトへの追加

https://react.dev/learn/add-react-to-an-existing-project

では選択肢として提示されていますが、新規プロジェクトを始める時の手引き

https://react.dev/learn/start-a-new-react-project

だと

Can I use React without a framework?

をクリックしたら「どうしてもと言うなら仕方ないな」みたいな感じでViteが選択肢として提示されます。

なお3月のTweetでは、

https://twitter.com/dan_abramov/status/1636575385209929728

「新規だったらフレームワーク使った方がいいでしょ」とのこと。このツリーの会話あんまり噛み合ってない感じがしてちょっと微妙…

個人的にはフレームワークを必須のものとして扱うのは、取っ付きの悪さが前面に出てしまうため得策ではないと考えています。

Viteを他の選択肢と同等に扱おうというissue

https://github.com/reactjs/react.dev/issues/5797

は立っていてPRも出ていますが、現時点では公式の動きはありません。

ありがとうCRA

Releasesを見ていくと、最後のリリースは去年の4月です。近年のリリース日をまとめるとこんな感じです。

5.0.1 (2022-04-12)
5.0.0 (2021-12-14)
4.0.3 (2021-02-22)
4.0.2 (2021-02-03)
4.0.1 (2020-11-23)
4.0.0 (2020-10-23)

まったくメンテされていないわけではないのか？ とも思いましたが、5.0.1のリリースに至るまでもすったんもんだがあったようです。

https://github.com/facebook/create-react-app/issues/11180

2021年の時点でメンテナが不足でヤバいって話が出ていました。その後、discussionに移行したようですが状況は厳しいままのようです。

https://github.com/facebook/create-react-app/discussions/11768

やはり、改めて見てもこれは「役割を終えた」と見るのが妥当そうです。今までありがとうCreate React App。