React Router应用中如何为客户端与服务端导入同一ILogger接口的不同实现并避免构建报错？

这个问题我之前在做同构React项目时踩过一模一样的坑——构建工具的静态分析可不认你运行时的window判断，哪怕你知道那段服务端导入代码永远不会在客户端执行，它还是会把服务端模块标记为客户端引用，直接抛出报错。下面几个方案亲测有效，你可以根据项目情况选：

1. 用构建工具环境变量做同步条件导入 #

大部分现代构建工具（Vite、Webpack、Next.js）都支持基于环境变量的条件编译，直接在导入阶段区分环境，构建工具会自动拆分客户端/服务端代码，不会交叉打包。

比如用Vite的import.meta.env.SSR或者Next.js的服务端环境判断：

import { type ILogger } from "~/types/logger";
import { consoleLogger } from "~/util/consoleLogger";

let logger: ILogger = consoleLogger;

// 服务端环境下直接同步导入（Node环境不存在异步加载问题）
if (import.meta.env.SSR) { // 如果你用Next.js，也可以用typeof window === "undefined"配合process.env.NODE_ENV
  const { nodeLogger } = require("~/util/nodeLogger.server");
  logger = nodeLogger;
}

export { logger };

这里用require而非import是因为服务端代码是同步执行的，而且构建工具能识别这种环境变量判断，直接把服务端模块排除在客户端打包之外。

2. 利用文件后缀约定让框架自动隔离 #

很多同构框架（比如Next.js、Remix）支持用.server.ts/.client.ts的后缀标识文件运行环境：

• 带.server的文件只会在服务端打包、运行
• 带.client的文件只会在客户端处理

你可以把日志初始化逻辑拆成两个文件：

• logger.server.ts：服务端专用，导入nodeLogger并导出实例
• logger.client.ts：客户端专用，直接导出consoleLogger

然后在公共文件里根据环境加载对应文件：

import { type ILogger } from "~/types/logger";

let logger: ILogger;

if (typeof window === "undefined") {
  const { logger: serverLogger } = require("./logger.server");
  logger = serverLogger;
} else {
  const { logger: clientLogger } = require("./logger.client");
  logger = clientLogger;
}

export { logger };

这种方式完全不用操心构建工具的检测，框架会自动帮你隔离环境代码。

3. 依赖注入模式（长期优雅方案） #

如果你的应用复杂度较高，推荐用依赖注入管理日志实例，彻底避免条件导入的问题：

首先创建一个日志提供者：

// ~/util/loggerProvider.ts
import { type ILogger } from "~/types/logger";
import { consoleLogger } from "~/util/consoleLogger";

let loggerInstance: ILogger | null = null;

// 用于在应用启动时注入对应环境的日志器
export function provideLogger(logger: ILogger) {
  loggerInstance = logger;
}

// 全局获取日志实例
export function getLogger(): ILogger {
  if (!loggerInstance) {
    // 兜底返回客户端日志器，或者根据需求抛出错误
    return consoleLogger;
  }
  return loggerInstance;
}

然后在服务端入口（比如自定义服务启动脚本、Next.js的_app.server.tsx）注入服务端日志器：

// 服务端入口文件
import { provideLogger } from "~/util/loggerProvider";
import { nodeLogger } from "~/util/nodeLogger.server";

// 启动时注入服务端实例
provideLogger(nodeLogger);

在客户端入口（比如index.tsx）注入客户端日志器：

// 客户端入口文件
import { provideLogger } from "~/util/loggerProvider";
import { consoleLogger } from "~/util/consoleLogger";

// 启动时注入客户端实例
provideLogger(consoleLogger);

之后在应用任何地方，直接调用getLogger()就能拿到对应环境的实例：

import { getLogger } from "~/util/loggerProvider";

const logger = getLogger();
logger.warn("这是一条警告日志");
logger.information("这是一条信息日志");

这种方式扩展性极强，以后要替换日志实现，只需要修改注入的地方就行，业务代码完全不用动。

补充：为什么你的原代码会报错？ #

构建工具是静态扫描代码的，它不会分析运行时逻辑——哪怕你把import放在异步函数里，并用typeof window包裹，它还是会识别到这个服务端模块的引用路径，进而判断“客户端文件引用了服务端专属模块”，直接抛出错误。异步导入在这里帮不上忙，因为构建工具还是会尝试解析这个路径。

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