Hello，大家好，我是 Sunday。

前段時間 React 19 正式發(fā)布 帶來了一系列的新功能。這些新功能大家用起來很爽，但是也帶來了一些新的生態(tài)問題。其中比較關(guān)鍵的就是 create-react-app（簡稱 CRA） 不能用啦...

因為 CRA 默認安裝 React 的最新可用版本，這也就意味著在 React 19 發(fā)布后它會安裝 React 19。但是 CRA 的默認模板包括 React Testing Library v13，它需要 React 18，而不是 React 19。

當(dāng) npm 檢測到這種不匹配時，它會拋出一個錯誤，導(dǎo)致項目無法正確設(shè)置。

針對這個問題，Redux 的作者 Mark Erikson 在最近的 GitHub 問題中詳細說明了這種不兼容的問題（https://github.com/facebook/create-react-app/issues/17004）：

圖片

雖然基于此，Mark Erikson 提供了 臨時解決方案，但是這并不能解決長期的問題：

圖片

因此，我們就得出了一個結(jié)論 CRA 已經(jīng)過時了！

CRA 已經(jīng)過時了

然后 CRA 已經(jīng)很多年沒有人進行維護了

圖片

但是，從 npm 的下載統(tǒng)計中，依然可以看出它依然是 React 開發(fā)者的常用工具

圖片

同時，在國內(nèi)的很多教程中，也都是使用 CRA 進行項目構(gòu)建的。

所以，這樣的問題，就必須要提供對應(yīng)的 解決方案。

而 React 官方團隊也給出了對應(yīng)的解決方案，那就是 棄用...

截圖來自 github create-react-app 倉庫 README

截圖來自 github create-react-app 倉庫 README

而作為替代，目前更推薦大家使用 vite 來創(chuàng)建 React 項目。

基于 Vite 的遷移方案

1. 卸載 CRA 依賴

npm uninstall react-scripts
npm install vite @vitejs/plugin-react --save-dev

2. 調(diào)整項目結(jié)構(gòu)

將 index.html 移至項目根目錄，并更新腳本引用為 ESM 格式：

<script type="module" src="/src/main.jsx"></script>

將 .js 文件擴展名改為 .jsx（如 App.js → App.jsx）。

3. 配置 Vite

創(chuàng)建 vite.config.js 文件：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

4. 更新環(huán)境變量

環(huán)境變量前綴需從 REACT_APP_ 改為 VITE_（如 VITE_API_KEY=123）。

5. 運行與調(diào)試

修改 package.json 腳本命令：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}