React应用迁移至DigitalOcean Droplet后无法运行的问题求助

场景说明 #

Web开发新手，首次尝试将React应用部署到DigitalOcean Droplet。Droplet系统为5.15.0-76-generic 22.04 Ubuntu x86_64 GNU/Linux，本地环境为5.19.0-45-generic 22.04.1 Ubuntu x86_64 GNU/Linux，本地与Droplet的npm、node版本均为v18.16.0，Droplet已安装nvm、npm、node、vite-create及nginx。

遇到的问题 #

1. npm install出现本地不存在的依赖漏洞 #

迁移项目根目录到Droplet后，执行npm install出现67个本地环境未检测到的依赖漏洞。

2. 运行npm run dev/build时ES模块加载错误 #

错误信息如下：

(node:24295) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
/vhome/node_modules/.bin/vite:2
import { performance } from 'node:perf_hooks'
^^^^^^

SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47

项目package.json内容：

{  
  "name": "ttto",  
  "private": true,  
  "version": "0.0.0",  
  "type": "module",  
  "scripts": {    
    "dev": "vite",    
    "build": "vite build",    
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",    
    "preview": "vite preview",    
    "storybook": "storybook dev -p 6006",    
    "build-storybook": "storybook build"  
  },  
  "dependencies": {    
    "create-vite": "^4.3.2",    
    "react": "^18.2.0",    
    "react-dom": "^18.2.0",    
    "react-icons": "^4.8.0",    
    "react-router-dom": "^6.10.0",    
    "typed.js": "^2.0.15"  
  },  
  "devDependencies": {    
    "@storybook/addon-docs": "^7.0.18",    
    "@storybook/addon-essentials": "^7.0.18",    
    "@storybook/addon-interactions": "^7.0.18",    
    "@storybook/addon-knobs": "^7.0.2",    
    "@storybook/addon-links": "^7.0.18",    
    "@storybook/blocks": "^7.0.18",    
    "@storybook/react": "^7.0.18",    
    "@storybook/react-vite": "^7.0.18",    
    "@storybook/testing-library": "^0.0.14-next.2",    
    "@types/react": "^18.0.28",    
    "@types/react-dom": "^18.0.11",    
    "@vitejs/plugin-react": "^4.0.0",    
    "babel-preset-react-app": "^10.0.1",    
    "eslint": "^8.38.0",    
    "eslint-plugin-react": "^7.32.2",    
    "eslint-plugin-react-hooks": "^4.6.0",    
    "eslint-plugin-react-refresh": "^0.3.4",    
    "eslint-plugin-storybook": "^0.6.12",    
    "prop-types": "^15.8.1",    
    "storybook": "^7.0.18",    
    "vite": "^4.3.2",    
    "vite": "^4.3.2",    
    "vite-plugin-compression": "^0.5.1"  
  }
}

已尝试的解决方法 #

• 更新Linux版本
• 更换npm/node版本
• 执行npm audit fix及npm audit fix --force
• 重启Droplet

解决建议 #

针对ES模块加载错误 #

1. 清理依赖缓存并重新安装
   执行以下命令：

   rm -rf node_modules
   rm package-lock.json
   npm cache clean --force
   npm install
   

   虽然package.json中已配置"type": "module"，但依赖安装不完整或缓存残留可能导致vite的二进制文件无法正确识别模块类型。

2. 修改scripts直接调用vite核心文件
   如果上述方法无效，修改package.json中的scripts，直接指向node_modules内的vite脚本：

   "scripts": {
     "dev": "node node_modules/vite/bin/vite.js",
     "build": "node node_modules/vite/bin/vite.js build",
     // 其他脚本保持不变
   }
   

针对依赖漏洞问题 #

1. 查看漏洞详情
   执行npm audit获取具体漏洞信息，区分高危/低危漏洞：

   • 低危漏洞若不影响生产，可暂时忽略；
   • 高危漏洞需手动更新对应依赖版本，避免使用npm audit fix --force（可能破坏依赖结构）。

2. 同步依赖版本锁
   将本地的package-lock.json上传到Droplet，再执行npm ci安装依赖，确保本地与Droplet的依赖版本完全一致，减少漏洞差异。

内容的提问来源于stack exchange，提问作者Augusto Perdomo F