Nuxt 2.X can't import Axios

[LegendSebastianoL]

Describe the bug

I just upgrade Axios to V1 in a Nuxt 2 project and I'm getting this error:

require() of ES Module /private/var/www/html/XXX/node_modules/axios/index.js from /private/var/www/html/XXX/node_modules/vue-server-renderer/build.dev.js not supported.
Instead change the require of index.js in /private/var/www/html/XXX/node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules.

Instead change the require of index.js in node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules.

  at r (node_modules/vue-server-renderer/build.dev.js:7946:24)
  at Object.axios (webpack:/external "axios":1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../node_modules/@Company/package/UserService.js (node_modules/@Company/package/UserService.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../store/membership/actions.js (store/membership/actions.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../store/membership/index.js (store/membership/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at updateModules (.nuxt/store.js:24:0)
  at Module../.nuxt/store.js (.nuxt/store.js:50:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../.nuxt/index.js (.nuxt/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../.nuxt/server.js (.nuxt/server.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Object.0 (server.js:4816:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at server.js:118:18
  at Object.<anonymous> (server.js:121:10)
  at evaluateModule (node_modules/vue-server-renderer/build.dev.js:7953:25)
  at node_modules/vue-server-renderer/build.dev.js:7987:25
  at new Promise (<anonymous>)
  at userContext (node_modules/vue-server-renderer/build.dev.js:7984:38)
  at Object.renderToString (node_modules/vue-server-renderer/build.dev.js:8146:17)
  at SSRRenderer.render (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:353:38)
  at runMicrotasks (<anonymous>)

We use import import axios from 'axios' throughout the code in asyncData (Server) and in the browser side

To Reproduce

No response

Code snippet

No response

Expected behavior

No response

Axios Version

1.1.3

Adapter Version

No response

Browser

No response

Browser Version

No response

Node.js Version

16.14.2

OS

No response

Additional Library Versions

No response

Additional context/Screenshots

No response

[jasonsaayman]

Hi 👋

Please try the latest pre-release by running the following:

npm i axios@1.2.0-alpha.1

Please provide feedback in either the pinned issue or discussion thread 🧵

[LegendSebastianoL]

Hi :) sorry for the delay.

I still have the same issue :(

[MPParsley]

It's complaining about node_modules/vue-server-renderer/build.dev.js

[cdefy]

Hi there,

I reckon I have the same issue. I'm stuck at axios 0.27.2 and can't upgrade to 1.0.0-alpha.1 or the latest one 1.3.4 for a Nuxt project (nuxt 2.15.8 and node 16.19)

Error is displayed in browser window :

require() of ES Module /nuxt_project/node_modules/axios/index.js from /nuxt_project/node_modules/vue-server-renderer/build.dev.js not supported. Instead change the require of index.js in /nuxt_project/node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules.

Showing this part of code from the node_modules/vue-server-renderer/build.dev.js file

7949     file = path$1.posix.join('.', file);
7950     if (files[file]) {
7951         return evaluateModule(file, sandbox, evaluatedFiles);
7952     }
7953     else if (basedir) {
7954         return require(resolvedModules[file] ||
7955             (resolvedModules[file] = resolve.sync(file, { basedir })));
7956     }
7957     else {
7958         return require(file);
7959     }

r@7954:24

I don't get why this topic is marked as closed, same for this one probably talking about the same problem ; the only "solution" offered is to revert to older version but it's not a real solution ^^
This other topic might be about the same problem as well.

Thanks for your work, time and help!

[gilzonme]

axios@1.2.0-alpha.1 doesn't seem to be working.

[jcao02]

Did anyone try using build.transpile in the nuxt.config file? This solved the issue for me as babel would transpile the code to be CJS compatible

[andrewscfl]

Did anyone try using build.transpile in the nuxt.config file? This solved the issue for me as babel would transpile the code to be CJS compatible

this worked for me thank you!

build: {
    transpile: [({ isLegacy }) => isLegacy && 'axios']
  },

[cdefy]

Thanks for the suggestion @jcao02 and thanks for the code to add in nuxt.config @andrewscfl. It worked for me, I managed to update axios to the latest version.

EDIT: I add to rollback to version 0.27.2 ; one of my API route was down, didn't take the time to investigate. :(