I'm creating a program to analyze security camera streams and got stuck on the very first line. At the moment my.js file has nothing but the import of node-fetch and it gives me an error message. What am I doing wrong?
Running Ubuntu 20.04.2 LTS in Windows Subsystem for Linux.
Node version:
user@MYLLYTIN:~/CAMSERVER$ node -v
v14.17.6
node-fetch package version:
user@MYLLYTIN:~/CAMSERVER$ npm v node-fetch
node-fetch@3.0.0 | MIT | deps: 2 | versions: 63
A light-weight module that brings Fetch API to node.js
https://github.com/node-fetch/node-fetch
keywords: fetch, http, promise, request, curl, wget, xhr, whatwg
dist
.tarball: https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0.tgz
.shasum: 79da7146a520036f2c5f644e4a26095f17e411ea
.integrity: sha512-bKMI+C7/T/SPU1lKnbQbwxptpCrG9ashG+VkytmXCPZyuM9jB6VU+hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q==
.unpackedSize: 75.9 kB
dependencies:
data-uri-to-buffer: ^3.0.1 fetch-blob: ^3.1.2
maintainers:
- endless <jimmy@warting.se>
- bitinn <bitinn@gmail.com>
- timothygu <timothygu99@gmail.com>
- akepinski <npm@kepinski.ch>
dist-tags:
latest: 3.0.0 next: 3.0.0-beta.10
published 3 days ago by endless <jimmy@warting.se>
esm package version:
user@MYLLYTIN:~/CAMSERVER$ npm v esm
esm@3.2.25 | MIT | deps: none | versions: 140
Tomorrow's ECMAScript modules today!
https://github.com/standard-things/esm#readme
keywords: commonjs, ecmascript, export, import, modules, node, require
dist
.tarball: https://registry.npmjs.org/esm/-/esm-3.2.25.tgz
.shasum: 342c18c29d56157688ba5ce31f8431fbb795cc10
.integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
.unpackedSize: 308.6 kB
maintainers:
- jdalton <john.david.dalton@gmail.com>
dist-tags:
latest: 3.2.25
published over a year ago by jdalton <john.david.dalton@gmail.com>
Contents of the.js file (literally nothing but the import):
user@MYLLYTIN:~/CAMSERVER$ cat server.js
import fetch from "node-fetch";
Result:
user@MYLLYTIN:~/CAMSERVER$ node -r esm server.js
/home/user/CAMSERVER/node_modules/node-fetch/src/index.js:1
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/user/CAMSERVER/node_modules/node-fetch/src/index.js
require() of ES modules is not supported.
require() of /home/user/CAMSERVER/node_modules/node-fetch/src/index.js from /home/user/CAMSERVER/server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/user/CAMSERVER/node_modules/node-fetch/package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13) {
code: 'ERR_REQUIRE_ESM'
}
user@MYLLYTIN:~/CAMSERVER$
From the Upgrade Guide
node-fetch was converted to be a ESM only package in version 3.0.0-beta.10 . node-fetch is an ESM-only module - you are not able to import it with require.
Alternatively, you can use the async import() function from CommonJS to load node-fetch asynchronously:
// mod.cjs
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
or you stay on v2 as they say in the README
node-fetch
is an ESM-only module - you are not able to import it with require. We recommend you stay on v2 which is built with CommonJS unless you use ESM yourself. We will continue to publish critical bug fixes for it.
EDIT
I saw that in the doc, used it, and the script crashes with :
error TS2556: A spread argument must either have a tuple type or be passed to a rest parameter.
Since you are using typescript you should do something like this
import nodeFetch, { RequestInfo, RequestInit } from "node-fetch";
const fetch = (url: RequestInfo, init?: RequestInit) => import("node-fetch").then(({ default: fetch }) => nodeFetch(url, init));
I always had errors with previous solutions, this is what worked every single time for me
const _importDynamic = new Function('modulePath', 'return import(modulePath)');
export const fetch = async function (...args: any) {
const {default: fetch} = await _importDynamic('node-fetch');
return fetch(...args);
}
node-fetch
v3 is ESM-only: https://github.com/node-fetch/node-fetch#loading-and-configuring-the-module . The esm
module you're adding is for adding ESM compatibility, but it's unnecessary now that Node 12+ supports ESM natively; and it doesn't work with ESM-only packages like node-fetch
3+.
To fix your issue:
esm
package."type": "module"
to your package.json
. And that's it. Then when you run node server.js
it should work.
There are a couple of ways to do this:
"type":"module"
in package.json
--input-type=module
when running the file.mjs
file extensionMany times that error happens through the current version of fetch what we can do to solve it, is to install a previous version I tried it and it worked for me.
to install the previous version: npm i node-fetch@2.6.1
or whatever you prefer.
I think this link is a comprehensive explanation about Error [ERR_REQUIRE_ESM]: require() of ES [node-fetch Module ] not supported.
node-fetch Error [ERR_REQUIRE_ESM]: require() of ES Module not supported
In case someone is solving this issue in 2022:
Recent versions of nodejs already includes global fetch
api. It is still an experimental feature and may be not ready to be used in production, but if you are writing some basic script or doing some sandbox project, you should definitely try it. Works without issues for me.
This is an official announcement and some examples here and here
Since the question was really about requiring node-fetch and there are definitely reasons that a developer might need to use require vs import, the answer to import the module using import() is somewhat accurate but isn't complete, because it ignores the fact that using import is async and if you're using node-fetch in your code in multiple places you're going to have a bit of an async mess all over the place whenever you want to use node-fetch, so the answer is very incomplete IMHO. A more complete answer would include a better how-to. Something like the following:
You need to use import() rather than require because this is an ES module. To avoid an async mess, you'll want to await the importing of this module once and then be able to use it wherever else you need it. To do that, create a module that imports any of your ES-only modules something like this:
"use strict";
let got;
let fetch;
module.exports.load = async function() {
queueMicrotask(function() {
// any ESM-only module that needs to be loaded can be loaded here, just add import for each using specific structure of each
import("got").then(({default: Got}) => got = Got );
fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
});
while(
// check each module to see if it's been loaded here
!got || !got.get || !fetch || typeof fetch !== "function"
) {
// waiting for modules to load
console.log("Waiting for ES-Only modules to load...");
await new Promise((resolve)=>setTimeout(resolve, 1000));
}
module.exports.got = got;
module.exports.fetch = fetch;
console.log("ES-Only modules finished loading!");
}
This then allows you to call the await the loading of the ES-Only modules once and then use the module later by grabbing it from your intermediary module like this:
"use strict";
const esmModules = require("esm_modules"); // or whatever you called the intermiary module
async function doMyFetching(url, options) {
const fetch = esmModules.fetch;
const result = await fetch(url, options)
}
The nice part of doing it this way is that you know that your ES-Only modules are loaded and you know that once they're loaded you can use them at will throughout the rest of your code in a simple and clean way that doesn't force you to add additional async logic all over the place whenever you need the module.
To fix this, I downgraded node-fetch
to the latest version 2, which right now is 2.6.6. This is the script I ran:
yarn add node-fetch@^2.6.6
or
npm install node-fetch@^2.6.6
I also added these compiler options:
{
"compilerOptions": { "allowJs": true, "outDir": "./dist" },
}
Here is in Typescript, this will install to the global scope, just import the file and fetch ready to use:
/* filename: fetch.ts */
if (!globalThis.fetch) {
import('node-fetch').then(({ default: fetch, Headers, Request, Response }) => {
Object.assign(globalThis, { fetch, Headers, Request, Response })
})
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.