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.

Webpack: isomorphic-unfetch breaks node build due to wrong esm interop.

See original GitHub issue

Bug Report

Requiring isomorphic-unfetch in a project built with Webpack targeting node leads to broken code. The issue is due to wrong interoperation between cjs & esm by isomorphic-unfetch.

How to Reproduce

$ mkdir bug-repro && cd bug-repro
$ yarn init -y
$ yarn add isomorphic-unfetch webpack webpack-cli
$ echo "require('isomorphic-unfetch')('https://goo.gl').then(console.log)" > index.js
$ npx webpack index.js --target node --mode development
$ node dist/main.js

Expected Result

> Response {
  ...
}

Actual Result

webpack:///./node_modules/isomorphic-unfetch/index.js?:3
		return __webpack_require__(/*! node-fetch */ "./node_modules/node-fetch/lib/index.mjs")(url.replace(/^\/\//g,'https://'), opts);
		                                                                                       ^

TypeError: __webpack_require__(...) is not a function

Context

In file packages/isomorphic-unfetch/index.js, you can find the following code: require('node-fetch'). However, the package node-fetch exposes the function fetch as the default export in an ESM module [1]. The correct way of requiring a default export from CommonJS is require('node-fetch').default; see [2].

[1] https://github.com/bitinn/node-fetch/blob/master/src/index.js#L34 [2] https://github.com/bitinn/node-fetch/issues/450#issuecomment-462695245

Environment

→ lsb_release -a
Description:	Ubuntu 18.04.2 LTS
→ node --version
v10.15.3
→ yarn --version
1.15.2
→ npm ls isomorphic-unfetch webpack
bug-repro@1.0.0
├── isomorphic-unfetch@3.0.0 
└── webpack@4.39.2

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
developitcommented, Sep 29, 2020

Released in 4.2.0. Sorry for the super long wait!

1reaction
karlhorkycommented, Oct 19, 2019

I had a similar issue to @ivan-kleshnin when using Slonik with Next.js in my project:

https://github.com/karlhorky/next.js-with-slonik

Fixed it in this commit by switching isomorphic-unfetch to cross-fetch, like @gabiseabra in https://github.com/emcasa/react-starter/pull/12:

https://github.com/karlhorky/next.js-with-slonik/commit/a61f47949aa367020c1b0d2f6d657e63702cb6a4

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack suddenly fails to compile due to "Module not ...
I've tried wiping out node_modules and npm install ing from scratch, upgrading Node to the v8 LTS, downgrading Enzyme and the React adapter...
Read more >
How to transpile ES modules with webpack and Node.js
Learn how webpack interacts with and supports ES modules in this deep dive tutorial on transpilation in Node.js.
Read more >
ECMAScript modules | Node.js v19.3.0 Documentation
This function is asynchronous because the ES module resolver in Node.js is allowed to be asynchronous. Interoperability with CommonJS#. import statements#. An ...
Read more >
Avoid these issues when using new ECMAScript modules ...
Most typescript applications importing commonjs modules should turn on esModuleInterop in their tsconfig file. Then you can just use a “normal” ...
Read more >
rollup.js
To make sure your ES modules are immediately usable by tools that work with CommonJS such as Node.js and webpack, you can use...
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