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

[ealmansi]

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] node-fetch/node-fetch#450 (comment)

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
[email protected]
├── [email protected] 
└── [email protected]

[ivan-kleshnin]

I'm getting

You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer
    at readWasm

With nodemon + unfetch + slonik. Probably related to this issue.

[karlhorky]

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 emcasa/react-starter#12:

upleveled/next-js-with-slonik-sept-2019@a61f479

[karlhorky]

Awesome, thanks @danieltodonnell!

[danieltodonnell]

I made a mistake and commented in the wrong issue :(

I meant to write "we will investigate" in the issue in faunadb that was affected by this issue.

[developit]

Released in 4.2.0. Sorry for the super long wait!