Unable to use fetch-mock as ES6 import

[BadIdeaException]

I can't import fetch-mock using NodeJS 17.6.0 and fetch-mock 9.11.0.

The following minimal example
index.mjs:

import fetchMock from 'fetch-mock';

package.json:

  "main": "index.js",
  "dependencies": {
    "fetch-mock": "^9.11.0",
    "node-fetch": "^3.2.3"
  }
}

produces

Error [ERR_REQUIRE_ESM]: require() of ES Module /tmp/node_modules/node-fetch/src/index.js from /tmp/node_modules/fetch-mock/cjs/server.js not supported.
Instead change the require of index.js in /tmp/node_modules/fetch-mock/cjs/server.js to a dynamic import() which is available in all CommonJS modules.

It seems that it's trying to import the CommonJS version, so as per the documentation about importing the correct version, I tried replacing the import with the esm version specifically:

import fetchMock from 'fetch-mock/esm/server';

Now I get:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/tmp/node_modules/fetch-mock/esm/server' imported from /tmp/index.mjs
Did you mean to import fetch-mock/esm/server.js?`

Okay, sure, let's try that:

import fetchMock from 'fetch-mock/esm/server.js';

Still no dice:

TypeError: global$1.XMLHttpRequest is not a constructor

I found issue 446 and issue 481 which seemed similar, and tried downgrading to mock-fetch version 8, but I see the same errors.

And now I don't know what more to try. What am I doing wrong here? Would be grateful for a nudge in the right direction.

[JSRedondo]

I think with version 2.x of node-fetch you are able to use require.
With version 3.x of node-fetch you are only able to use import (ES modules).

https://www.npmjs.com/package/node-fetch#installation

[guilhermechiara]

I'm getting the exactly same error and I'm using the exactly same version here. Tried to import directly the functions needed, but still couldn't find a way to fix it.

[guilhermechiara]

@BadIdeaException that happens because on server.js fetch-mock is importing node-fetch using require, which on version 3 is not supported anymore.

To fix it, downgrade your node-fetch version to 2.6.7. That will solve the problem temporarily.

Still server.js might need to change the way it's importing to support node-fetch 3+.

[BadIdeaException]

Thanks, I'll look into that. I ended up switching to nock instead. I do like the fetch-mock API better, but since node-fetch 3.0.0 introduced breaking changes, and it can't be long now before fetch comes built-in to NodeJS, I'm not too keen on downgrading.

Hopefully this will get fixed in fetch-mock quickly.

[drzraf]

I guess the import should not instantiate an object depending upon XMLHttpRequest.
This is something that would rather wait for .sandbox() to be run because the user could postpone such a call after he created it (for example, after jsdom created the XMLHttpRequest)

[ClarenceL]

Does this work? It seems nock doesn't use HttpRequest, so it doesn't work with node-fetch for me.

[perry-mitchell]

Still getting the following error using this in an ESM setup:

TypeError: global$1.XMLHttpRequest is not a constructor

Since ESM has been available in Node for quite some time now, I think such issues should be treated as a priority. Will try nock instead for now.. hopefully this gets fixed soon.

[cristiantiradob]

Same problem here. Any solution?

[Cobertos]

@BadIdeaException that happens because on server.js fetch-mock is importing node-fetch using require, which on version 3 is not supported anymore.

To fix it, downgrade your node-fetch version to 2.6.7. That will solve the problem temporarily.

Still server.js might need to change the way it's importing to support node-fetch 3+.

This fixed it for me. Downgrading to version 2 with npm install node-fetch@^2 fixed it, even though I'm not using node-fetch directly in my project, only through fetch-mock