axios: Axios 1.3.4 typescript error for AxiosRequestConfig

Describe the bug

Upgraded to axios 1.3.4 and typescript 4.9.5 and getting TS warning for request headers type

Argument of type '(config: InternalAxiosRequestConfig<any>) => AxiosRequestConfig<any>' is not assignable to parameter of type '(value: InternalAxiosRequestConfig<any>) => InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>'.
  Type 'AxiosRequestConfig<any>' is not assignable to type 'InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>'.
    Type 'AxiosRequestConfig<any>' is not assignable to type 'InternalAxiosRequestConfig<any>'.
      Types of property 'headers' are incompatible.
        Type 'AxiosHeaders | (Partial<RawAxiosHeaders & { Accept: AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "User-Agent": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; Authorization: AxiosHeaderValue; } & { ...; }> & Partial<...>) | undefined' is not assignable to type 'AxiosRequestHeaders'.
          Type 'undefined' is not assignable to type 'AxiosRequestHeaders'.
            Type 'undefined' is not assignable to type 'Partial<RawAxiosHeaders & { Accept: AxiosHeaderValue; "Content-Length": AxiosHeaderValue;

To Reproduce

create react sandbox with axios latest version 1.3.4
create basic interceptor (mentioned below)
sample https://codesandbox.io/s/vigilant-elbakyan-wdjzgd?file=/src/interceptor.ts

Code snippet

import axios, { AxiosRequestConfig, InternalAxiosRequestConfig } from "axios";

export const axiosInstance = axios.create({
  baseURL: SOME_URL
});

// Interceptors
axiosInstance.interceptors.request.use(
  (config): AxiosRequestConfig => {
    return config;
  },
  (error): any => {
    return Promise.reject(error);
  }
);

axiosInstance.interceptors.response.use(
  async (response): Promise<any> => {
    return response;
  },
  async (error): Promise<any> => {
    return Promise.reject(error);
  }
);

Expected behavior

AxiosRequestConfig is using following type definition for headers

headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;

instead If we use InternalAxiosRequestConfig, mentioned TS error goes away. but since it is called internal, it is confusing for devs to use it or not.

export interface InternalAxiosRequestConfig<D = any> extends AxiosRequestConfig<D> {
  headers: AxiosRequestHeaders;
}

Axios Version

1.3.4

Adapter Version

No response

Browser

No response

Browser Version

No response

Node.js Version

No response

OS

No response

Additional Library Versions

No response

Additional context/Screenshots

No response

About this issue

Original URL
State: open
Created a year ago
Reactions: 24
Comments: 18

Commits related to this issue

temp fix: use InternalAxiosRequestConfig instead of AxiosRequestConfig see https://github.com/axios/axios/issues/5494 or https://github.com/axios/axios/issues/5573 — committed to woocommerce/woocommerce by lsinger 7 months ago
Исправляет ошибку типизации AdaptAxiosRequestConfig https://github.com/axios/axios/issues/5573#issuecomment-1489596178 — committed to avedmigen/170610-six-cities-15 by avedmigen 4 months ago

Most upvoted comments

Somehow at the moment it feels like axios is a complete nightmare to keep up to date. Every release seems to be broken or breaks something. 😞

+37

nnaku on Mar 2, 2023

try this

import axios, { AxiosRequestConfig, AxiosRequestHeaders } from "axios";

interface AdaptAxiosRequestConfig extends AxiosRequestConfig {
  headers: AxiosRequestHeaders
}

export const axiosInstance = axios.create({
  baseURL: SOME_URL
});

// Interceptors
axiosInstance.interceptors.request.use(
  (config): AdaptAxiosRequestConfig => {
    return config;
  },
  (error): any => {
    return Promise.reject(error);
  }
);

axiosInstance.interceptors.response.use(
  async (response): Promise<any> => {
    return response;
  },
  async (error): Promise<any> => {
    return Promise.reject(error);
  }
);

+22

fourdusk on Mar 30, 2023

I had the same problem. Strangely enough when I import the following two types Ts error disappear.

import type { AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios'

+15

coderbaozi on Mar 4, 2023

headers: new AxiosHeaders({
    'Content-Type': 'application/json',
 }),

Try it.

+14

Hello-ZH on Aug 29, 2023

I just used InternalAxiosRequestConfig instead (for the latest version)

+10

7iomka on Apr 21, 2023

headers: new AxiosHeaders({
    'Content-Type': 'application/json',
 }),

Try it.

Thank you! This worked for me.

Axios v1.2.3

fearandesire on Jan 29, 2024

I’ve encountered the same bug and after come investigation I discovered that inside the interceptor the headers (according to Typescript at least) might be undefined. This is incompatible with the type AxiosRequestHeaders, but since I don’t know why TS says that the headers might be undefined, I see type assertion as the only solution.

The least safe option is to assert the whole request:

return request as AxiosRequestConfig

the alternative is to assert only the headers

return {
   ...request,
   headers: yourHeaders as AxiosRequestHeaders
}

NatanCieplinski on Jul 21, 2023

FYI, related:

I had to change the interceptor type to “internal” as well, it will not compile with the old AxiosRequestConfig

    const requestOnFulfilled = (config: InternalAxiosRequestConfig) => {
      return config;
    }
   // ... 
    API.interceptors.request.use(requestOnFulfilled, requestOnRejected);

rofreytag on Nov 14, 2023