使用CRA创建React TypeScript项目失败，提示react-scripts版本不兼容

问题描述 #

按照官方安装指南创建React TypeScript项目时，出现报错：

"The react-scripts version you're using is not compatible with the --template option."

实际生成的是JavaScript React项目，而非TypeScript项目。已执行以下操作但未解决：

• npm uninstall -g create-react-app
• npx clear-npx-cache

环境信息 #

• npm: 6.14.17（通过snap安装）
• node: 14.19.3（通过snap安装）
• npx: 5.0.1

错误截图 #

补充信息：全局依赖检查输出 #

执行npm list --location=global的结果：

npm ERR! peer dep missing: react@^17.0.0, required by @mui/styles@5.9.2
npm ERR! peer dep missing: react@^16.0.0, required by react-driftjs@1.2.2
npm ERR! peer dep missing: react@^16.6.0, required by react-meta-tags@1.0.1
npm ERR! peer dep missing: react@^15.3.0 || ^16.0.0, required by react-reveal@1.2.2
npm ERR! peer dep missing: react-dom@^16.0.0, required by react-driftjs@1.2.2
npm ERR! peer dep missing: react-dom@^16.6.0, required by react-meta-tags@1.0.1
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.21.0
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.21.0
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.21.0
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.21.0
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.21.0
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.21.0
npm ERR! peer dep missing: typescript@>= 2.7, required by fork-ts-checker-webpack-plugin@6.5.2
npm ERR! extraneous: eslint@8.19.0 /media/umar/EDUCATION/Development/CanadaInnovates/centre-website/node_modules/fork-ts-checker-webpack-plugin/node_modules/eslint
npm ERR! extraneous: @babel/core@7.18.6 /media/umar/EDUCATION/Development/CanadaInnovates/centre-website/node_modules/@babel/helper-compilation-targets/node_modules/@babel/core
npm ERR! peer dep missing: @babel/plugin-syntax-flow@^7.14.5, required by eslint-plugin-flowtype@8.0.3
npm ERR! peer dep missing: @babel/plugin-transform-react-jsx@^7.14.9, required by eslint-plugin-flowtype@8.0.3
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.21.0
npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta, required by tsutils@3.21.0

解决方案 #

1. 强制使用最新版create-react-app创建项目 #

直接指定最新版本的create-react-app执行创建命令，绕过npx的缓存旧版本问题：

npx create-react-app@latest my-ts-app --template typescript

2. 清理本地残留依赖 #

如果当前目录存在旧项目的node_modules或package-lock.json，先删除再执行创建命令：

rm -rf node_modules package-lock.json
npx create-react-app@latest my-ts-app --template typescript

3. 修复全局依赖冲突 #

从全局依赖检查结果来看，存在大量依赖缺失和冲突，清理无关全局依赖：

• 卸载全局的TypeScript相关旧依赖：

npm uninstall -g typescript tsutils fork-ts-checker-webpack-plugin

• 清理npm全局缓存：

npm cache clean --force

4. 更换Node.js/npm安装方式 #

通过snap安装的Node.js/npm可能存在兼容性问题，建议使用nvm重新安装：

1. 卸载snap版本的Node.js：

sudo snap remove node

2. 安装nvm：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

3. 重启终端后，安装并使用LTS版本的Node.js（推荐16.x或18.x）：

nvm install --lts
nvm use --lts

4. 再次执行TypeScript项目创建命令：

npx create-react-app@latest my-ts-app --template typescript

内容的提问来源于stack exchange，提问作者DevLoverUmar