使用Vercel部署时Node modules无法导入的问题

核心原因 #

process是Node.js的内置模块，浏览器环境本身不存在这个对象，直接在前端代码里导入它必然报错，和导入方式无关。

可行解决方案 #

1. 若需求是访问环境变量

Vercel托管静态单页应用时，无需导入process来获取环境变量：

• 给需要暴露给前端的环境变量加上对应前缀（比如Vite构建用VITE_，Create React App用REACT_APP_）
• 在Vercel项目设置中配置好环境变量，构建时会自动注入到代码中
• 代码中直接通过构建工具提供的方式访问，比如import.meta.env.VITE_MY_VAR（Vite）或process.env.REACT_APP_MY_VAR（Create React App，需打包处理）

2. 若确实需要在浏览器中模拟process对象

可以使用第三方process包，配合构建工具处理：

• 安装依赖：npm install process
• 配置构建工具：
  • Webpack：在配置文件的plugins中添加new webpack.ProvidePlugin({ process: 'process/browser' })
  • Vite：安装vite-plugin-node-polyfills插件并在vite.config.js中启用，或通过define: { 'process.env': {} }模拟基础结构
• 代码中正常导入：import process from 'process'，由构建工具自动解析依赖路径并打包

3. 关键注意事项

永远不要直接导入./node_modules下的文件，正常的包导入应写import process from 'process'，让构建工具处理依赖解析。

为什么你之前的尝试无效 #

• require('node_module')：浏览器原生不支持CommonJS的require语法，必须经过打包工具转译
• 修改为.mjs或添加type='module'：仅改变了模块加载方式，无法让浏览器凭空生成process对象
• 单独用.mjs导入再导出：同样解决不了浏览器缺少process运行环境的问题

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