AxiosError should be a top-level export instead of a static

[GuichiZhao]

Describe the bug

There is no way to use AxiosError correctly (It should be used as both type and value)

To Reproduce

import { AxiosError as AxiosErrorFromImport } from 'axios';
import axios from 'axios';

/**
 * AxiosError is resolved as a Class from the "import"
 * Class can be used as both type and value in typescript
 * Such structure should be the right way to do types
 * The following code has no compile time error
 *
 * BUT it has a runtime error ERROR because the Implementation
 * is not export, which is a disaster
 */
const errorHandler = (error: AxiosErrorFromImport) => {
  console.log(AxiosErrorFromImport.ERR_BAD_OPTION);
  console.log(error.response);
};

/**
 * Actually, the implementation is added to the default export as static
 */
const { AxiosError } = axios;

/**
 * By doing this AxiosError is not treated as a class ANYMORE
 * so the following code has a compile time error
 */

// 'AxiosError' refers to a value, but is being used as a type here
// Did you mean 'typeof AxiosError'?
const errorHandler1 = (error: AxiosError) => {};

// Event though I follow the error prompts
const errorHandler2 = (error: typeof AxiosError) => {
  // Property 'config' does not exist on type 'typeof AxiosError'.
  error.config
};
// There is no way to use the type declaration


// So, what is the point to put AxiosError as a static？
// It totally screwed up the type declaration:
// AxiosError can be used as a type by importing from top-level
// AxiosError can be used as a value by geting it from default import
// It is very confusiong and inconvenient 

Expected behavior

Put AxiosError as top-level export with implementation rather than type ONLY

Environment

• Axios 1.1.2
• Typescript 4.6.3

[haneenmahd]

I am opening a PR on this 👍 !

[chrisweb]

This might be related to #5031

[GuichiZhao]

I am opening a PR on this +1 !

The problem is not name conflicting, it is the wrong way (not typescript wise) of exporting

[haneenmahd]

Okay so I should change the way it is exported, right?

[GuichiZhao]

Okay so I should change the way it is exported, right?

In my opinion, the whole class (both type and implementation) should be exported at top level. Currently only type (interface) is exported at top level, the real implementation is hidden deep inside, which is the root of the trouble

[haneenmahd]

I have fixed it 👍🏻 !

Can you take a look at it?

[GuichiZhao]

I have fixed it 👍🏻 !

Can you take a look at it?

I am not maintainer of axios and do not want to involve too much, you can explain the reason and ask someone relevant to do the reviewing.

[jasonsaayman]

Will have a look @haneenmahd

[littledian]

It seems pr: #5030 fixed it but then commit: #2149464bb4f12c1101b15f73298a060e92470376 revert it

[Erazihel]

I tried to update axios to v1.1.3 but the error is still here unfortunately.

const axiosError = new AxiosError();

TypeError: _axios.AxiosError is not a constructor

[littledian]

I tried it after upgrade axios to v1.1.3, It works when I import it but not work when require it;
eg:
It works: import axios from 'axios' or import { AxiosError } from 'axios';
It not works in broswer: const axios = require('axios'), but it works in nodejs env