Web3 v1.2.11导入报错：Cannot read properties of undefined (reading 'providers')

问题详情 #

报错提示：

Cannot read properties of undefined (reading 'providers')

使用TypeScript导入Web3 1.2.11版本时，编写代码如下：

import Web3 from 'web3'
const readonlyProvider = new Web3.providers.HttpProvider(providerURL)

编译为JavaScript后代码变为：

const readonlyProvider = new web3_1.default.providers.HttpProvider(providerURL);

此时控制台提示web3_1.default未定义，进而触发上述报错。

问题原因 #

Web3 1.x版本采用CommonJS规范导出模块，而TypeScript默认的ES模块导入语法会尝试读取default导出，但Web3并没有提供default导出，导致编译后的代码找不到对应属性。

解决方法 #

方法1：改用命名导入 #

修改TypeScript的导入语句为命名导入形式，直接引用整个模块：

import * as Web3 from 'web3';
const readonlyProvider = new Web3.providers.HttpProvider(providerURL);

这样编译后的代码会直接使用web3_1而非web3_1.default，就能正常访问providers属性。

方法2：调整TypeScript配置 #

在项目的tsconfig.json中开启allowSyntheticDefaultImports和esModuleInterop选项：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    // 保留其他原有配置
  }
}

这两个选项会让TypeScript自动兼容CommonJS模块的导入，无需修改原有导入代码即可解决问题。

方法3：实例化Web3后使用关联provider #

如果场景允许，也可以先创建Web3实例，直接关联provider使用：

import Web3 from 'web3';
const web3 = new Web3(providerURL);
// 后续可直接使用web3实例调用相关方法

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