React使用Winston-react时报错TypeError: fs.readdirSync is not a function

错误原因 #

• winston默认面向Node.js服务端环境开发，内部依赖Node.js原生fs文件系统模块，浏览器运行环境不存在该模块，直接在前端React项目引入就会触发该报错。
• 你的代码存在导入错误：useWinstonLogger由winston-react包导出，不是winston-logger，环境问题修复后需要同步修正导入路径。

修复步骤 #

1. 配置Node模块兼容（针对Create React App创建的项目） #

当前新版本前端构建工具默认不打包Node核心模块的polyfill，你需要手动配置将服务端专用模块标记为忽略：

• 首先安装craco用于修改CRA默认配置：

npm install @craco/craco --save-dev

• 项目根目录新建craco.config.js，添加如下配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.resolve.fallback = {
        ...webpackConfig.resolve.fallback,
        fs: false,
        path: false,
        os: false,
        crypto: false
      }
      return webpackConfig
    }
  }
}

• 修改package.json中的启动脚本，把所有react-scripts替换为craco：

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

2. 调整winston实例配置 #

创建logger实例时仅使用浏览器兼容的传输器，不要引入File、DailyRotateFile等服务端专用的传输器：

import React from 'react';
import winston from 'winston';
import { WinstonProvider } from 'winston-react';

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

const App = () => (
  <WinstonProvider logger={logger}>
    <div>
      your awesome application
    </div>
  </WinstonProvider>
);

export default App

3. 修正hooks导入错误 #

组件中使用日志时调整导入路径：

import React from 'react';
import { useWinstonLogger } from 'winston-react';

const Component = () => {
  const logger = useWinstonLogger();

  React.useEffect(() => {
    logger.info('your awesome information log!');
  }, []);

  return (
    <div>
      your awesome component
    </div>
  );
};

export default Component

备选方案 #

如果不需要和后端winston日志格式强统一，直接使用前端专用日志库（如loglevel、pino-browser）可以避免服务端模块兼容问题，集成更简单。

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