React+TypeScript项目中axios_1.default.post不是函数报错求助

问题分析 #

你的TypeScript React项目编译为CommonJS模块时，axios 1.4.0的模块导出逻辑与当前TS配置不兼容，导致编译后的代码无法正确识别axios的默认导出实例，触发axios_1.default.post is not a function错误。

解决方案 #

1. 调整TypeScript配置 #

在tsconfig.json的compilerOptions中添加两个关键配置，让TS更好地处理CommonJS模块的默认导入：

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "commonjs",
    "jsx": "react",
    "skipLibCheck": true,
    "strict": true,
    "moduleResolution": "node",
    "target": "es6",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

• esModuleInterop: 自动适配CommonJS与ES模块的导入差异，将CommonJS模块转为ES模块兼容格式。
• allowSyntheticDefaultImports: 允许从无默认导出的模块中导入默认值，适配axios这类库的导出逻辑。

2. 确认导入语句 #

保持原导入语句不变：

import axios from 'axios';

修改配置后重新编译项目，即可正常调用axios.post。

备选方案：使用命名导入 #

若配置调整无效，可改用命名导入方式直接引用axios模块：

import * as axios from 'axios';

await axios.post('api/account/register', {
    FirstName: formData.firstName,
    LastName: formData.lastName,
    Username: formData.email,
    Password: formData.password,
    IsLocked: true,
    Role: 'Admin',
});

3. 清理依赖缓存（可选） #

若仍存在异常，清理依赖缓存并重新安装：

# npm
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

# yarn
yarn cache clean
rm -rf node_modules yarn.lock
yarn install

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