Module not found: Can't resolve 'debug' in 'follow-redirects'

[riculum]

Section/Content To Improve

I am using Next.js 13.4.2 and Axios 1.4.0 for my current project and encountering an issue while running my project in dev mode. As soon as I import axios (still everything fine) and then try to fetch som data, it shows me a warn inside the console:

Module not found: Can't resolve 'debug' in '\node_modules\follow-redirects'

The error suggests using './debug' instead of 'debug' and mentions that requests starting with a name are treated as module requests. However, changing the source code is not an option for me as I dont wanna perform code changes inside node_moduels

Here is the import trace for the requested module:
./node_modules/follow-redirects/debug.js ./node_modules/follow-redirects/index.js ./node_modules/axios/lib/adapters/http.js ./node_modules/axios/lib/adapters/adapters.js ./node_modules/axios/lib/core/dispatchRequest.js ./node_modules/axios/lib/core/Axios.js ./node_modules/axios/lib/axios.js ./node_modules/axios/index.js ./src/components/login/LoginForm.tsx

Suggested Improvement

I would appreciate any guidance or suggestions on how to resolve this issue without modifying the source code. I've heard there is a resolve option called 'preferRelative' that might help in resolving these kinds of requests in the current directory. Can someone please explain how to use this resolve option or provide an alternative solution? Thank you.

Relevant File(s)

No response

[prabhjot85]

(New here and I just going through the source code, so take my advice with pinch of salt) I see that this module is being used by follow-redirects, but it's not being imported statically. Most likely your bundler is ignoring this, since, the import is behind a condition.

However, the follow-redirects does fall back to a dummy function if the debug module is not available. If you're too concerned about warning, you can add debug module as a dependency OR you can ignore this warning as it should appear only in dev environment.

[Rrhapsod]

Same problem here, but it's working fine if you ignore the warning.

[DigitalBrainJS]

Axios is an isomorphic library. This error indicates that your build tool is not configured properly to build the client-related code, instead, it tries to build the Node.js version of Axios and then use it on the client, polyfilling the node.js dependencies. Axios for browsers does not have any dependencies.
So to fix this, you need to figure out how to configure your bundler to resolve the client-side code of the dependencies.

[riculum]

I'm using Next.js and Axios on the client-side. Can someone explain the specific implications and benefits of incorporating Axios within a Next.js application for client-side requests?

[estebanarriaga]

The problem comes with the ./debug in follow-redirects package.
I managed to remove the alert like this:
Install the debug package.

npm install debug

By doing this you remove this alert but a new appears:

Module not found: Can't resolve 'supports-color' in './node_modules/debug/src'

There is an issue with supports-color github issue here in versions +9 so you will have to install "supports-color": "^8.1.1"

npm install supports-color@8.1.1

This worked for me, hope its works for you two : )

[Arden27]

Same problem, have you found the solution, guys?

[eddielin0926]

I use yarn berry and I got a similar warning. I fixed it by adding the following config to .yarnrc.yml. Once you're done, remember to run yarn to apply the change.

packageExtensions:
  axios@*:
    dependencies:
      debug: "*"
  debug@*:
    dependencies:
      supports-color: "*"

[20manas]

I use yarn berry and I got a similar warning. I fixed it by adding the following config to .yarnrc.yml. Once you're done, remember to run yarn to apply the change.

packageExtensions:
  axios@*:
    dependencies:
      debug: "*"
  debug@*:
    dependencies:
      supports-color: "*"

This (followed by yarn install) also fixes the issue for me:

packageExtensions:
  follow-redirects@*:
    dependencies:
      debug: "*"
  debug@*:
    dependencies:
      supports-color: "*"