Webpack: isomorphic-unfetch breaks node build due to wrong esm interop.
See original GitHub issueBug 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:
- Created 4 years ago
- Reactions:3
- Comments:5 (1 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Released in 4.2.0. Sorry for the super long wait!
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
tocross-fetch
, like @gabiseabra in https://github.com/emcasa/react-starter/pull/12:https://github.com/karlhorky/next.js-with-slonik/commit/a61f47949aa367020c1b0d2f6d657e63702cb6a4