如何从外部目录导入常量到React客户端并避免process未定义错误？

问题描述 #

项目结构：

home
├── server
│   ├── package.json
│   └── src
│        └── constants.js
└── client
    ├── package.json
    └── src
         └── index.js

server/src/constants.js 代码：

export const test = 'hello'

在client/src/index.js中尝试导入：

import { test } from '../../server/src/constants.js'

浏览器控制台报错：

Uncaught ReferenceError: process is not defined
at ../server/node_modules/dotenv/lib/env-options.js

推测是跨目录导入触发了server端的dotenv依赖，导致React编译报错，需求是不通过API传递常量，找到直接共享的解决方案。

解决方法 #

1. 新建共享公共目录

在项目根目录创建shared文件夹，存放需要跨端共享的常量：

home
├── shared
│   └── constants.js
├── server
│   ├── package.json
│   └── src
└── client
    ├── package.json
    └── src
         └── index.js

将原server/src/constants.js的内容迁移到shared/constants.js，然后两端分别导入：

• Server端：import { test } from '../../shared/constants.js'
• Client端：import { test } from '../../shared/constants.js'
  这种方式彻底隔离了server端的node_modules依赖，从根源避免报错。

2. 构建前自动拷贝常量文件

在client/package.json的脚本中添加预处理命令，启动或构建前将server端的常量文件复制到client目录：

{
  "scripts": {
    "prestart": "cp ../server/src/constants.js src/shared-constants.js",
    "prebuild": "cp ../server/src/constants.js src/shared-constants.js",
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

客户端修改导入路径：

import { test } from './shared-constants.js'

注意：Windows系统需将cp替换为copy，或使用跨平台工具cpy-cli保证兼容性。

3. 配置Webpack别名排除无关依赖

如果使用Create React App，可借助craco修改Webpack配置：

1. 安装依赖：npm install @craco/craco --save-dev
2. 在client根目录创建craco.config.js：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@shared-constants': path.resolve(__dirname, '../server/src/constants.js')
    },
    externals: {
      dotenv: 'commonjs dotenv'
    }
  }
};

3. 修改client的启动脚本：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

4. 客户端导入：

import { test } from '@shared-constants'

通过externals配置排除server端的dotenv依赖，避免客户端打包时引入node环境变量相关代码。

4. 使用Monorepo管理（如pnpm Workspace）

在项目根目录创建pnpm-workspace.yaml：

packages:
  - 'server'
  - 'client'

在client/package.json中添加对server包的本地依赖：

{
  "dependencies": {
    "server": "workspace:*"
  }
}

客户端直接导入：

import { test } from 'server/src/constants.js'

这种方式适合中大型项目，统一管理跨包共享代码。

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