使用TypeScript创建CRA项目后无法运行npm start的问题

问题重现 #

使用npx create-react-app react-script-demo --template typescript创建项目后，运行npm start出现以下错误：

'typescript\react-script-demo\node_modules.bin' 未被识别为内部或外部命令、可运行的程序或批处理文件。
node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module 'C:********\react-scripts\bin\react-scripts.js'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

解决步骤 #

• 清理依赖并重新安装

  1. 删除项目根目录下的node_modules文件夹和package-lock.json文件
  2. 执行npm cache clean --force清理npm缓存
  3. 重新执行npm install安装所有依赖

• 检查项目路径与环境变量

  1. 确保项目路径无中文、空格或特殊字符，路径异常会导致模块解析失败
  2. 检查系统环境变量Path，确认包含C:\Windows\System32和Node.js的安装路径（例如C:\Program Files\nodejs\）

• 手动安装最新版react-scripts
  执行命令：npm install react-scripts@latest --save，强制更新到最新版本的react-scripts

• 绕过npm脚本直接运行
  尝试用npx直接启动项目：npx react-scripts start

• 验证package.json脚本配置
  打开项目根目录的package.json，确认scripts字段中的start命令为：

  "scripts": {
    "start": "react-scripts start",
    // 其他脚本...
  }
  

  确保没有多余的路径错误

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