axios v0.27.0 uses node polyfills provided by webpack, which are removed from webpack v5

[AhmadMayo]

Describe the bug

I'm using axios in an app created by create-react-app. As soon I upgraded axios to v0.27.0, the application stop working with the error shown in the reproduction section. Downgrading to v0.26.1 solved the issue.

It looks like the issues rises from the xhr adapter.

To Reproduce

Create an empty project using CRA

npx create-react-app my-app
cd my-app

install axios

npm install axios

use axios to make any request

useEffect(() => {
  axios.get("https://google.com");
}, []);

start the application

npm start

The error is shown in the console

Module not found: Error: Can't resolve 'url' in '/home/mayo/personal-projects/my-app/node_modules/axios/lib/adapters'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
ERROR in ./node_modules/axios/lib/adapters/xhr.js 17:10-24
Module not found: Error: Can't resolve 'url' in '/home/mayo/personal-projects/my-app/node_modules/axios/lib/adapters'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

webpack compiled with 1 error

Expected behavior

That it works, or at least there are instruction to install the dependencies in the documentation.

Environment

• Axios Version 0.27.0
• Additional Library Versions create-react-app (react-scripts) v5 / webpack v5

Additional context/Screenshots

None

[LiangKuan4451]

I also encountered this problem, but it was solved by simply installing a "url" dependency, as suggested. I was particularly shocked.
npm i url

[Ladrillo]

I think it's this line inside xhr.js that didn't exist in v. 26

[DigitalBrainJS]

@jasonsaayman #4594

[chenrihong]

I think it's this line inside xhr.js that didn't exist in v. 26

yes!

[kumardeepakme]

I also encountered this problem, but it was solved by simply installing a "url" dependency, as suggested. I was particularly shocked. npm i url

that indeed works but is not an appropriate solution.

either axios should re-bundle it in their package or there should be a better workaround.

[jasonsaayman]

Fixing this right now

[KyorCode]

This should be reopened I think. The follow-redirects dependency also depends on the default webpack < 5 polyfills. Which are not present anymore.

I think

axios/lib/adapters/http.js

Line 10 in 13dd93f

var httpFollow = require('follow-redirects').http;

this line and the next should be changed to the require('follow-redirects/http') version, so people in webpack can replace them with the build ins.

Also see browser usage in their readme file: https://www.npmjs.com/package/follow-redirects

[jasonsaayman]

@KyorCode can you please put in a pull request for this?