question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Provide a dynamic cjs wrapper built in to node-fetch that import(..)

See original GitHub issue

Based on the documentation jimmywarting linked above, I created a helper typescript file that hopefully can serve other typescript users that are stuck:

// node-fetch.ts
// Helps importing node-fetch based on https://github.com/node-fetch/node-fetch/issues/1279

import type fetch from 'node-fetch';
export { RequestInit } from 'node-fetch'; // TODO: add more exports as needed here


// eslint-disable-next-line no-eval
const fetchPromise: Promise<typeof fetch> = eval('import("node-fetch")').then((mod: { default: typeof fetch }) => mod.default);
const exportedFetch: typeof fetch = (...args) => fetchPromise.then(fetch => fetch(...args));
export default exportedFetch;

Now, just import it with import fetch, { RequestInit } from './node-fetch'; almost as usual (note the ./)

It would be handy if such script was directly embedded in the package, like import fetch, { RequestInit } from 'node-fetch/cjs.js';.

_Originally posted by @jeremyVignelles in https://github.com/node-fetch/node-fetch/issues/1266#issuecomment-925813598_


I think this is a good solution that dose not involve introducing a bundler and compiling everything into one file and importing all dependencies and basically duplicating everything. or using complex tools such as esbuild, noesm. This dynamic import() have been suggested too many already and seems like good temporary easy solution.

I’m wondering if we should go ahead and introduce something like it built in to node-fetch. there is also the method such as lazy import only when needed: https://github.com/node-fetch/node-fetch/issues/1279#issuecomment-915063354 that i think is good solution also. it can have a faster boot up time. basically goes like this:

const _importDynamic = new Function('modulePath', 'return import(modulePath)')

module.exports = async function fetch(...args) {
  const {default: fetch} = await _importDynamic('node-fetch'))
  return fetch(...args))
}

One take a way from developers who uses a bundler/test framework such as jest, webpack, rollup, ts-node, ts-node-dev etc is that they like to rewrite the import() statement to require() or something like it. therefore i think a eval/new Function solution would be a good option

One thing to note doe is that it won’t export Headers, Request and Response in a sync manner but most ppl only use the fetch method anyways(?) - would need to be documented that this dose not do the same thing

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
Donnevtiscommented, Oct 9, 2021

Some trouble. It’s a mess. I can’t use ES modules in a serverless environment. The typescript compiles a dynamic import to require. @types/node-fetch is deprecated. What do you want me to do?

2reactions
LinusUcommented, Oct 9, 2021

Except for typescript where it’s translated into a require() call, which is what we want to avoid with this wrapper…

This is fixed in the latest TypeScript beta, which should be out in ~1 month 🎉

https://devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/

Read more comments on GitHub >

github_iconTop Results From Across the Web

instead change the require of index.js in to a dynamic import ...
node-fetch is an ESM-only module - you are not able to import it with require. We recommend you stay on v2 which is...
Read more >
Instead change the require of index.js, to a dynamic import ...
I did npm i node-fetch@2.6.1, it seems like it fixed it, then i wrote node utils/nftport/uploadFiles.js in the terminal (dont know the proper ......
Read more >
Dynamic Module Imports in JavaScript - YouTube
With ES Modules came the ability to use the import statement and export statement to manage our JavaScript as modules.
Read more >
got - npm
TypeScript icon, indicating that this package has built-in type ... you'll have to convert to ESM or use the dynamic import() function.
Read more >
Introduction - rollup.js
compile to a CommonJS module ('cjs') rollup main.js --file bundle.js --format cjs ... rollup.config.js import fetch from 'node-fetch'; export default ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found