Using http from to 1.6.7 (migrate from 0.27.2)

[jhk0530]

Describe the issue

This might be a bit of a strange question (and it's also because my understanding of Javascript is a bit limited).

I'm updating an existing legacy project and want to update the version of axios.

I'm using the code I wrote below, and the version of the legacy is 0.27.2.

I want to update axios to 1.6.7 (latest),
so I changed code import http from 'axios' to
import axios from 'axios' (as described in the README).

When I try to update it, I get an error like below.

Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/axios/index.js not supported.

Instead change the require of index.js in null to a dynamic import() which is available in all CommonJS modules.

I checked some other issues, but I still couldn't solve the problem.

#5088, #5091, #5613, #5765, #5162

I'm using 0.27.2 because I don't have any major issues without updating, but I'm confused that I'm getting an error even though I'm using import instead of require.

Do you have any suggestions on how to resolve this?

Thanks.

Example Code

// This work with 0.27.2 but not work with 1.6.7
// as change import axios from 'axios';
import http from 'axios';
...
const res = await http.head(url, {timeout: 1000})
...

Expected behavior

No response

Axios Version

0.27.2

Adapter Version

No response

Browser

Chrome

Browser Version

120.0.6099.234

Node.js Version

18.18.0

OS

macOS (m1)

Additional Library Versions

"dependencies": {
    "axios": "^1.6.7",
    "esm": "^3.2.25",
    "execa": "^5.1.1"
},
"devDependencies": {
  "@babel/core": "^7.22.20",
  "@babel/plugin-transform-async-to-generator": "^7.22.5",
  "@babel/preset-env": "^7.22.20",
  "@babel/preset-react": "^7.22.15",
  "@electron-forge/cli": "^7.2.0",
  "@electron-forge/maker-zip": "^7.2.0",
  "electron": "^26.2.1",
  "fs-extra": "^11.1.1"
}

Additional context/Screenshots

No response

[msugenius]

Hello!

I have not been able to reproduce your problem. Reproducing your environment made sure that everything works as expected. It seems that in your situation the problem is not with axios library, but with import. Did you specify the following line in pacakge.json:
"type": "module"
Also it can be mistake in your esm configuration.

[jhk0530]

Hi,

In package.json "type": "module" is not specified.
This is because the code works a little differently. (I feel like I should have shared this with you before)

in package.json, is works as below
"main": "src/index.js"

and index.js has below code.

require = require("esm")(module);
module.exports = require("./main.js")

finally, main.js uses example code above

// This work with 0.27.2 but not work with 1.6.7
// as change import axios from 'axios';
import http from 'axios';
...
const res = await http.head(url, {timeout: 1000})
...

I think this confusing caused by mixing require and import in both index.js and main.js.

I searched and considering to re-write all code as ESM, which may be better solution for this.

Thanks again for advice @msugenius

[msugenius]

Hi!

Thanks for the additional code snippets, now I realize that my conclusion was hasty. Those module are really incompatible since of axios@1.0.0. My recommendations are as follows:

1. Try to avoid using esm (the module has not been updated for 5 years and therefore may not be compatible with other modern modules and node versions) and use "type":" module" along with it
2. If the first option is impossible you can still use axios@0.27.2.

I hope my answer was useful.