解决Import declaration conflicts with local declaration of 'fs'报错

在项目主进程文件中执行以下代码时触发报错：

import fs from 'fs-extra'

fs.ensureDir(settingsUserDataFolder, err => {
  console.log(err)
})

报错信息：

Import declaration conflicts with local declaration of 'fs'

注释掉fs.ensureDir调用后报错消失；改用import fsExtra from 'fs-extra'时，出现类似冲突报错：

Import declaration conflicts with local declaration of 'fsExtra'

解决方法 #

1. 规避全局/局部变量重名 #

• 排查主文件及引入的其他文件，确认是否已声明同名变量（如const fs = require('fs')），重命名其中一个即可解决冲突。
• Electron主进程会自动全局注入原生fs模块，可通过重命名导入避免冲突：

  // 命名空间导入
  import * as fsExtra from 'fs-extra'
  // 调用时使用新名称
  fsExtra.ensureDir(settingsUserDataFolder, err => {
    console.log(err)
  })
  

2. 调整Webpack主进程配置 #

修改webpack.main.config.js，处理模块解析逻辑：

• 添加node配置屏蔽Webpack对原生fs的处理：

  module.exports = {
    // 其他配置项
    node: {
      fs: 'empty'
    }
  }
  

• 或通过externals让Webpack直接使用Node.js模块解析fs-extra：

  module.exports = {
    // 其他配置项
    externals: {
      'fs-extra': 'commonjs2 fs-extra'
    }
  }
  

3. 修正TypeScript配置 #

调整tsconfig.json的编译选项，确保模块解析规则正确：

{
  "compilerOptions": {
    "moduleResolution": "node", // 按Node.js规则解析模块
    "types": ["node", "fs-extra"] // 明确引入所需类型声明
    // 其他配置项
  }
}

4. 同步依赖版本 #

确保fs-extra与对应的类型声明包版本匹配，避免类型冲突：

npm install fs-extra @types/fs-extra --save

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