运行React Boilerplate本地服务时遇npm及模块缺失错误求助

问题描述 #

我尝试在本地运行 react-boilerplate 项目时遇到两个错误：

错误1：pngquant 构建失败 #

npm ERR! code 1
npm ERR! path C:\Users\ksche\Documents\Projects\React_BoilerPlate\into\new_Project\node_modules\pngquant-bin
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node lib/install.js
npm ERR! ‼ Command failed: C:\Users\ksche\Documents\Projects\React_BoilerPlate\into\new_Project\node_modules\pngquant-bin\vendor\pngquant.exe --version
npm ERR!
npm ERR!
npm ERR!   ‼ pngquant pre-build test failed
npm ERR!   i compiling from source
npm ERR!   × Error: pngquant failed to build, make sure that libpng-dev is installed
npm ERR!     at C:\Users\ksche\Documents\Projects\React_BoilerPlate\into\new_Project\node_modules\execa\index.js:231:11
npm ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
npm ERR!     at async Promise.all (index 0)

npm ERR! 本次运行的完整日志可查看：
npm ERR!     C:\Users\ksche\AppData\Local\npm-cache_logs\2022-08-15T14_41_21_036Z-debug-0.log

错误2：找不到 express 模块 #

执行 npm start 后出现：

react-boilerplate@4.0.0 start
cross-env NODE_ENV=development node server

node:internal/modules/cjs/loader:936
throw err;
^

Error: Cannot find module 'express'
Require stack:
- C:\Users\ksche\Documents\Projects\React_BoilerPlate\into\new_Project\server\index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object. (C:\Users\ksche\Documents\Projects\React_BoilerPlate\into\new_Project\server\index.js:3:17)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155: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) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\Users\ksche\Documents\Projects\React_BoilerPlate\into\new_Project\server\index.js'
]
}

解决步骤 #

1. 处理 pngquant 构建失败 #

Windows系统无需安装libpng-dev，按以下操作：

• 清除npm缓存：npm cache clean --force
• 删除项目目录下的 node_modules 文件夹和 package-lock.json 文件
• 任选一种方式重新安装依赖：
  • PowerShell中执行 $env:PNGQUANT_SKIP_BUILD=true，cmd中执行 set PNGQUANT_SKIP_BUILD=true，随后运行 npm install
  • 或使用国内镜像安装：npm install pngquant-bin --registry=https://registry.npmmirror.com，再执行 npm install

2. 修复 express 模块缺失 #

依赖未完全安装导致该问题，解决完pngquant的问题后，重新执行：

npm install

确认所有依赖安装完成后，再运行 npm start

内容的提问来源于stack exchange，提问作者SAI CHARAN KATKAM