React TypeScript中使用anafanafo遇两类错误，求解决方案

错误1：找不到'anafanafo'的声明文件 #

• 检查你的anafanafo.d.ts文件位置，确保被TypeScript识别：
  • 将声明文件放在项目src目录下，或者在tsconfig.json的include数组里明确添加该文件路径，示例：

    {
      "include": ["src/**/*", "./anafanafo.d.ts"]
    }
    

  • 若仍不生效，直接在使用anafanafo的组件文件顶部添加声明：

    declare module 'anafanafo';
    

错误2：无法解析'fs'模块 #

该问题源于anafanafo依赖的char-width-table-consumer使用了Node.js专属的fs模块，而浏览器环境不支持此模块，修复方式如下：

• 若使用Create React App且不想eject项目：
  1. 安装react-app-rewired和customize-cra；
  2. 在项目根目录创建config-overrides.js文件，添加配置：

     const { override, addWebpackModuleRule } = require('customize-cra');
     
     module.exports = override(
       addWebpackModuleRule({
         resolve: {
           fallback: {
             fs: false
           }
         }
       })
     );
     

  3. 修改package.json的启动脚本，将react-scripts替换为react-app-rewired：

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test"
     }
     

• 若已eject或自定义Webpack配置：
  直接在webpack.config.js的resolve.fallback中添加fs: false：

  module.exports = {
    // ...其他配置
    resolve: {
      fallback: {
        fs: false
      }
    }
  };
  

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