升级至ESNext与NodeNext后TypeScript axios导入报错问题

问题原因 #

切换到ES模块模式（package.json设"type":"module"）+ moduleResolution:NodeNext后，TypeScript严格遵循ES模块解析规则。axios的CommonJS版本通过module.exports = axios导出，在ES模块环境中导入这类模块时，TypeScript会将其解析为一个包含default属性的模块对象。直接import axios from 'axios'拿到的是这个模块对象而非axios实例，因此找不到post方法，必须通过.default访问。

解决办法 #

• 改用命名导入
  使用import * as axios from 'axios'，此时axios就是包含所有方法的模块对象，可直接调用axios.post()。

• 调整TypeScript配置
  在tsconfig.json的compilerOptions中添加：

  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true
  

  这两个配置会让TypeScript自动处理CommonJS模块的默认导入，将import axios from 'axios'转换为等效于const axios = require('axios').default的逻辑，无需手动加.default即可调用axios.post()。

• 升级axios到支持ES模块的版本
  较新版本的axios已原生支持ES模块，升级后直接import axios from 'axios'就能正常调用post方法，无需额外处理。

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