React项目执行npm start报错'User'非内部命令、找不到react-scripts模块

报错复现 #

新建React项目后执行npm start，命令行输出如下错误：

C:\Rachna\p-16 working with Form & User Input using http request\user-input-project>npm start
    
    > user-input-project@0.1.0 start
    > react-scripts start
    
    'User' is not recognized as an internal or external command,
    operable program or batch file.
    node:internal/modules/cjs/loader:936
      throw err;
      ^
    
    Error: Cannot find module 'C:\Rachna\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: []
}

报错分为两部分：首先提示'User' 不是可识别的内部或外部命令、可运行程序或批处理文件，随后抛出MODULE_NOT_FOUND类型错误，提示无法找到指定路径下的react-scripts.js模块。

问题根因 #

• 路径截断问题：项目存放的上级目录名称包含空格和&特殊字符，Windows命令行解析路径时遇到空格会自动截断，把空格后的内容识别为新的执行命令。路径中的User Input字段被拆分，User被误判为需要独立执行的命令，触发第一处报错。
• 依赖查找路径错误：路径被截断后，Node.js无法正确定位到项目根目录，没有进入项目下的node_modules目录查找依赖，错误跑到上层C:\Rachna\路径下搜索react-scripts包，触发模块找不到的报错。

修复步骤 #

按顺序操作即可解决：

• 优先处理路径问题：将项目所在路径中所有带空格、中文、&这类特殊字符的目录重命名，替换为短横线连接的无空格名称，比如把上级目录p-16 working with Form & User Input using http request重命名为p-16-form-user-input-http，从根源避免路径解析错误。
• 重新进入重命名后的项目根目录，执行npm install确认所有依赖安装完整，避免出现依赖缺失问题。
• 再次执行npm start即可正常启动项目。

提示：Windows环境下开展前端/Node.js项目开发，统一将项目存放在无空格、无特殊字符、无中文的路径下，可以避免80%以上的启动、构建类路径解析错误。

内容的提问来源于stack exchange，提问作者Rachna Singh Thakur