Typscript cannot import node-fetch

Question

I'm trying to import 'node-fetch'.

import fetch from "node-fetch";

But I seem to get an error.

C:\Users\pat\Documents\GitHub\js\flux\backend\dist\http.js:7
const node_fetch_1 = __importDefault(require("node-fetch"));
                                     ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\pat\Documents\GitHub\js\flux\backend\node_modules\node-fetch\src\index.js from C:\Users\pat\Documents\GitHub\js\flux\backend\dist\http.js not supported.
Instead change the require of index.js in C:\Users\pat\Documents\GitHub\js\flux\backend\dist\http.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\pat\Documents\GitHub\js\flux\backend\dist\http.js:7:38)
    at Object.<anonymous> (C:\Users\pat\Documents\GitHub\js\flux\backend\dist\client.js:11:16)
    at Object.<anonymous> (C:\Users\pat\Documents\GitHub\js\flux\backend\dist\index.js:6:34) {
  code: 'ERR_REQUIRE_ESM'
}

My tsconfig can be found at https://sourceb.in/D5gqXavXF8

This usually indicates that you shoud change your tsconfig from `"module": "CommonJS",` to e.g. `"module": "ES2020"` but this might break other things if they can't work as ES2020 modules. — apokryfos, Jul 23 '22 at 11:39

Muhammad Usama · Answer 1 · 2022-07-23T11:37:13.597

1

In your tsconfig.json file add this compiler option

 "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

If this doesn't work then you can do this depending upon your setup

// Do this if using JAVASCRIPT
const fetch = (...args) =>
  import('node-fetch').then(({ default: fetch }) => fetch(...args));

// Do this if using TYPESCRIPT
import { RequestInfo, RequestInit } from 'node-fetch';

const fetch = (url: RequestInfo, init?: RequestInit) =>
  import('node-fetch').then(({ default: fetch }) => fetch(url, init));

Alternatively, you can downgrade the node-fetch package to version 2.6.6 and still use the require syntax. Version 2 of the node-fetch package is built with CommonJS.

You can read more about the breaking changes of the node-fetch package in their GitHub upgrade guide.

Give this blog a read as well

edited Jul 23 '22 at 11:37

answered Jul 23 '22 at 08:57

Muhammad Usama

172
7

1

Thanks for the response! I already have this enabled by default, so this shouldn't be the problem or the solution. – HippoBaguette Jul 23 '22 at 09:05
@HippoBaguette can you share your tsconfig.json here? – Muhammad Usama Jul 23 '22 at 09:23
Of course, https://sourceb.in/D5gqXavXF8 – HippoBaguette Jul 23 '22 at 09:49
In your package.json file, what is the value of the "type" property? "commonjs" or "module" – Muhammad Usama Jul 23 '22 at 10:39
I do not have a "type" property set, so i would assume perhaps the default? – HippoBaguette Jul 23 '22 at 10:51
Okay so by default value of type is "commonjs". In that case you need to use node-fetch@2 as per documentation here https://www.npmjs.com/package/node-fetch. node-fetch from v3 is an ESM-only module - you are not able to import it with require(). If you cannot switch to ESM, please use v2 which remains compatible with CommonJS. npm install node-fetch@2 – Muhammad Usama Jul 23 '22 at 11:18
Using the code in your answer some code has been able to run, and now a new error appears. https://sourceb.in/g2ZboItqqI – HippoBaguette Jul 23 '22 at 11:42
Which one you used javascript one or the typescript one? – Muhammad Usama Jul 23 '22 at 11:45
Typescript, I'm using typescript so logically I used the typescript one – HippoBaguette Jul 23 '22 at 23:56

Typscript cannot import node-fetch

1 Answers1