I am getting error axios.default.create is not function with webpack and react-cra

[gr8pathik]

We have created a custom javascript library called Domain and we are using Axios to hit API calls inside that library. we gave app-domain name in package.json and axios as dependencies also.

import axios from "axios";

export class Domain {
    axiosInst: any;
    constructor() {
        console.log('axios -->', axios);
        this.axiosInst = axios.create({
            baseURL: config.baseUrl,
            headers: {
                'Content-Type': 'application/json'
            }
        });
    }
}

Now, If we use this custom library in our node application (we are adding app-domain in node package.json dependencies) we are able to use this Domain class properly and can hit the API's also.

But if we use the same thing in our react (CRA) application we are getting the below error.

Uncaught TypeError: axios_1.default.create is not a function

After some debugging we found that in the Node application we are getting actual Axios object but during react application we are getting

console.log('axios -->', axios);
/static/media/axios.d3b7d28587da77444af0.cjs

So Webpack is considering Axios as assets and creates a file for that which we don't need.

Does anyone have any idea how to solve this issue?

[ns-vpanfilov]

The issue is caused by axios ^1.0.0; I solved the issue by downgrading to "axios": "0.27.2"

Related issue: axios/axios#5292

Update: I found a solution using craco: #11889 (comment). That allowed me to solve the issue without downgrading

[rcbevans]

This is caused by cra treating cjs module dependencies as assets so not bundling them correctly.

There are a could of old PRs against cra to fix, such as #12021.

I was able to work around it using react-app-rewired based on #12021 (comment).