使用Winston Logger时Remix应用导航触发整页重载问题排查

我开发了一个小型Remix应用，主页展示StudyViewCard组件，该组件通过Link跳转至StudyDetail页面，原本导航仅后台加载所需数据，无整页重载。但引入Winston Logger并调用logger.debug('Demo')后，每次导航都会触发整页重载，移除该调用则恢复正常。

相关代码 #

原组件代码 #

import { Link } from "@remix-run/react";
import React from "react";

const StudyViewCard: React.FC<IProps> = ({ study }) => {
  const detailLink = `/study-report/${study.studyId}`;

  return (
    <div>
      <div>
        {study.longName}
      </div>
      ...
    </div>
  );
};

export default StudyViewCard;

引入Logger后的组件代码 #

import { Link } from "@remix-run/react";
import React from "react";
import logger from "~/common/log/Logger";

const StudyViewCard: React.FC<IProps> = ({ study }) => {
  const detailLink = `/study-report/${study.studyId}`;

  logger.debug("Demo");

  return (
    <div>
      <div>
        {study.longName}
      </div>
      ...
    </div>
  );
};

export default StudyViewCard; 

Logger导出代码 #

const winston = require('winston');

const logger = winston.createLogger({
  level: 'debug',
  format: winston.format.json(),
  transports: [new winston.transports.Console()],
});

export default logger;

问题原因 #

核心问题是Winston的CommonJS模块写法与Remix的ESM环境不兼容，且客户端环境无法运行Winston的Console transport：

1. 模块格式冲突：Winston这里用了require的CommonJS写法，而Remix默认是ESM模块环境。直接在组件中导入这个CommonJS导出的logger，会在客户端渲染时引发模块加载异常。
2. 客户端API缺失：Winston的Console transport依赖Node.js的特定API（比如process对象），浏览器环境中没有这些API。当组件执行logger.debug("Demo")时，客户端渲染会直接报错。
3. Remix的 fallback 机制：Remix检测到客户端渲染失败后，会自动触发整页重载，尝试通过服务器端渲染来恢复页面，这就导致原本的客户端导航变成了整页刷新。
4. 无调用时正常的原因：移除logger.debug调用后，虽然导入了logger但没有执行涉及Node环境的代码，不会触发报错，所以导航恢复正常的客户端跳转逻辑。

解决方向 #

• 改用Winston的ESM导入方式：把Logger代码里的require换成import winston from 'winston';
• 做环境判断，仅在服务器端调用logger：

  if (typeof window === 'undefined') {
    logger.debug("Demo");
  }
  

• 或者给Winston配置兼容浏览器的transport（更推荐只在服务端用Winston打日志）

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