React项目执行npm run dev报错‘Missing script: "dev"’的解决方法

错误信息 #

执行npm run dev时终端输出：

npm ERR! Missing script: "dev"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/somrat/.npm/_logs/2023-12-10T20_37_20_228Z-debug-0.log

日志详情：

0 verbose cli /usr/local/bin/node /usr/local/bin/npm
1 info using npm@8.11.0
2 info using node@v16.15.1
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 0ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 0ms
6 timing config:load:builtin Completed in 0ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/Users/somrat/.npmrc Completed in 2ms
11 timing config:load:user Completed in 2ms
12 timing config:load:file:/Users/somrat/Desktop/clothes_shop_backend/C:UsersmynameAppDataRoamingnpm/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:validate Completed in 0ms
15 timing config:load:credentials Completed in 1ms
16 timing config:load:setEnvs Completed in 1ms
17 timing config:load Completed in 9ms
18 timing npm:load:configload Completed in 9ms
19 timing npm:load:mkdirpcache Completed in 0ms
20 timing npm:load:mkdirplogs Completed in 0ms
21 verbose title npm run dev
22 verbose argv "run" "dev"
23 timing npm:load:setTitle Completed in 5ms
24 timing config:load:flatten Completed in 1ms
25 timing npm:load:display Completed in 3ms
26 verbose logfile logs-max:10 dir:/Users/somrat/.npm/_logs
27 verbose logfile /Users/somrat/.npm/_logs/2023-12-10T20_37_20_228Z-debug-0.log
28 timing npm:load:logFile Completed in 2ms
29 timing npm:load:timers Completed in 0ms
30 timing npm:load:configScope Completed in 0ms
31 timing npm:load Completed in 19ms
32 silly logfile start cleaning logs, removing 1 files
33 silly logfile done cleaning log files
34 timing command:run Completed in 3ms
35 verbose stack Error: Missing script: "dev"
35 verbose stack
35 verbose stack To see a list of scripts, run:
35 verbose stack   npm run
35 verbose stack     at RunScript.run (/usr/local/lib/node_modules/npm/lib/commands/run-script.js:97:13)
35 verbose stack     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli.js:78:5)
36 verbose cwd /Users/somrat/Desktop/newproject
37 verbose Darwin 23.1.0
38 verbose node v16.15.1
39 verbose npm  v8.11.0
40 error Missing script: "dev"
40 error
40 error To see a list of scripts, run:
40 error   npm run
41 verbose exit 1
42 timing npm Completed in 27ms
43 verbose code 1
44 error A complete log of this run can be found in:
44 error     /Users/somrat/.npm/_logs/2023-12-10T20_37_20_228Z-debug-0.log

问题原因 #

核心原因是项目根目录的package.json文件中未定义dev脚本命令。npm执行run dev时会读取package.json里的scripts字段，找不到对应命令就会抛出该错误。另外需注意：Create React App默认没有dev脚本，启动命令为npm start。

解决方法 #

1. 检查package.json的scripts字段 #

打开项目根目录的package.json，查看scripts是否包含dev命令。示例：

• Vite项目的正常配置：

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
  

• Create React App的正常配置：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

2. 添加/修改dev脚本 #

如果需要dev命令，手动在scripts中添加：

• Vite项目：添加"dev": "vite"
• webpack项目：添加"dev": "webpack serve --mode development"（需确保已安装webpack-dev-server）

3. 确认工作目录正确 #

从日志可知当前工作目录为/Users/somrat/Desktop/newproject，确保该目录下存在package.json，且你是在该目录下执行命令。若不在，执行cd /Users/somrat/Desktop/newproject切换目录后再运行命令。

4. 重新安装依赖（可选） #

若package.json配置正确但仍报错，尝试重置依赖：

rm -rf node_modules package-lock.json
npm install

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