使用create-react-app创建项目后执行npm run start报错：找不到react模块

问题现象 #

使用npx create-react-app my-app创建React项目后，在项目目录D:\Projects\MY PRACTICE\my-app执行npm run start时出现两类问题：

1. npm弃用警告

   npm 警告：配置项中的--global、--local已被弃用，请使用--location=global替代（重复两次）。

2. 模块缺失错误
   执行启动脚本时抛出以下错误：

   node:internal/modules/cjs/loader:936
   throw err;
   ^
   
   Error: Cannot find module 'react'
   调用栈：
   - C:\Users\User\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js
       at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
       at Function.resolve (node:internal/modules/cjs/helpers:108:19)
       at Object. (C:\Users\User\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js:43:31)
       at Module._compile (node:internal/modules/cjs/loader:1105:14)
       at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
       at Module.load (node:internal/modules/cjs/loader:981:32)
       at Function.Module._load (node:internal/modules/cjs/loader:822:12)
       at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
       at node:internal/main/run_main_module:17:47 {
   code: 'MODULE_NOT_FOUND',
   requireStack: [
   'C:\Users\User\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js'
   ]
   }
   

解决方案 #

1. 消除npm弃用警告 #

npm版本更新后废弃了--global/--local参数，执行以下命令更新配置即可解决：

npm config set prefix --location=global

2. 解决"Cannot find module 'react'"错误 #

该问题源于项目依赖未正确安装，或全局react-scripts与本地依赖冲突，按以下步骤处理：

• 卸载全局react-scripts
  全局安装的react-scripts会干扰项目本地依赖，先移除：

  npm uninstall -g react-scripts
  

• 重新安装本地依赖
  回到项目根目录，执行命令重新安装所有依赖：

  npm install
  

  安装完成后再次执行npm run start启动项目。

• 极端情况：清空缓存并重建项目
  若上述步骤无效，清空npm缓存后重新创建项目：

  npm cache clean --force
  npx create-react-app my-app
  

  进入新项目目录后执行npm run start。

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