React&TypeScript：启动开发服务器时出现错误

问题说明 #

通过npx create-react-app todo-list --template typescript创建TypeScript React项目后，执行npm start时出现路径解析错误：系统错误地在C:\Users\ayex\Desktop\freecodecamp\react-scripts\bin\react-scripts.js查找文件，而非项目目录下的node_modules，且删除node_modules和package-lock.json重装后问题仍存在。

解决方案 #

1. 移除路径中的特殊字符 #

你的项目路径包含&符号（React&Typescript），Windows命令行会将其解析为特殊分隔符，导致路径识别错误：

• 将项目移动到不含特殊字符（&、空格、中文等）的路径下，例如C:\Users\ayex\Desktop\freecodecamp\ReactTypescript\todo-list
• 重新在新路径下执行npm start

2. 调整react-scripts的依赖位置 #

当前react-scripts被放在devDependencies中，而create-react-app默认会将其放在dependencies，这可能导致启动时无法正确识别：

• 修改package.json，将devDependencies中的"react-scripts": "^5.0.1"移到dependencies中
• 执行以下命令重装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 再次尝试npm start

3. 全局安装并关联react-scripts #

通过全局安装后本地关联，强制指定react-scripts的路径：

• 全局安装对应版本：

  npm install -g react-scripts@5.0.1
  

• 在项目目录下执行关联命令：

  npm link react-scripts
  

• 执行npm start测试

4. 清理npm缓存后重装 #

缓存异常也可能导致依赖路径错误：

• 清理npm缓存：

  npm cache clean --force
  

• 删除项目下的node_modules、package-lock.json
• 重新执行npm install和npm start

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