Teams React+TS应用调试时ESLint找不到node:fs模块求助

核心原因 #

报错源于eslint-plugin-prettier依赖的synckit使用了Node.js 16+支持的node:fs前缀导入方式，而前端构建环境默认不识别这类Node内置模块的引用，导致浏览器端调试时触发模块找不到的错误。

可行解决方案 #

1. 调整ESLint配置，兼容Node环境

在eslintrc.json中补充Node环境声明和模块解析配置：

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true // 开启Node环境识别
  },
  "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json",
        "extensions": [".ts", ".tsx", ".js", ".jsx"]
      },
      "node": {
        "extensions": [".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  }
}

2. 配置构建工具屏蔽Node内置模块

如果使用Webpack，在webpack.config.js中添加fallback配置，让构建工具忽略fs模块：

module.exports = {
  resolve: {
    fallback: {
      "fs": false,
      "node:fs": false
    }
  }
};

如果使用Vite，在vite.config.ts中添加别名和优化配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'node:fs': 'empty-module'
    }
  },
  optimizeDeps: {
    esbuildOptions: {
      platform: 'browser'
    }
  }
});

注：需要先安装empty-module依赖：npm install empty-module --save-dev

3. 降级依赖版本规避node:fs引用

降级eslint-plugin-prettier到不使用node:fs前缀的版本，搭配兼容的Prettier版本：

npm uninstall eslint-plugin-prettier prettier
npm install eslint-plugin-prettier@4.2.1 prettier@2.8.8 --save-dev

4. 修正TypeScript配置

在tsconfig.json中确保包含Node类型声明，并使用匹配的模块解析策略：

{
  "compilerOptions": {
    "types": ["node", "react", "react-dom"],
    "moduleResolution": "node16",
    "target": "ES2020"
  }
}

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