axios_1.default.create is not a function

[w00kie]

I've been following the docs to use with React Query but get the following error and I don't know what to do:

axios_1.default.create is not a function. 
(In 'axios_1.default.create(_this.axiosConfigDefaults)', 'axios_1.default.create' is undefined)

My api.ts is as follows:

import { OpenAPIClientAxios } from 'openapi-client-axios';
import type { Client } from './types/openapi';

const api = new OpenAPIClientAxios({
    definition: 'http://127.0.0.1:8000/api/docs/openapi',
    withServer: { url: 'http://127.0.0.1:8000' },
});

export const getApiClient = async () => {
    const client = await api.getClient<Client>();
    return client;
}

And I'm calling the API in a custom element as so:

const TagSelect: React.FC = () => {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ["listTags"],
    queryFn: () =>
      getApiClient()
        .then((client) => client.listTags())
        .then((res) => res.data),
  });

  if (isPending) {
    return <div>Loading tags...</div>;
  }

  if (isError) {
    return <div>Error loading tags: {error.message}</div>;
  }

  return (
    <select options={data} />
  );
};

[w00kie]

After much research, this seems to be an issue with Axios being a CommonJS library and the way that the default create-react-app framework is setup does not work with it.

Since the React docs do not recommend using create-react-app anymore, I've switched to Vite and everything works like a charm out of the box.

So I guess this can be closed and I would recommend anyone struggling with create-react-app to move to a more recent framework like Vite or Next.