Fetch Polyfill (whatwg-fetch) throws 'WebpackError: self is not defined'

Question

Added whatwg-fetch to my Gatsby project yarn add whatwg-fetch, but it no longer builds.

Instead, I receive the following error:

ERROR #95313

Building static HTML failed

WebpackError: ReferenceError: self is not defined

fetch.umd.js:8 node_modules/whatwg-fetch/dist/fetch.umd.js:8:1

fetch.umd.js:2 node_modules/whatwg-fetch/dist/fetch.umd.js:2:63

fetch.umd.js:5 Object../node_modules/whatwg-fetch/dist/fetch.umd.js node_modules/whatwg-fetch/dist/fetch.umd.js:5:2

provider.js:1 Module../src/store/provider.js src/store/provider.js:1:1

gatsby-ssr.js:1 Module../gatsby-ssr.js gatsby-ssr.js:1:1>

Answer 1

OK, so I think this is due to the window object being unavailable - it seems like this script was written to be run directly in the browser, rather than from the Gatsby/React context.

However, I found a workaround, which is to simply use a different polyfill called fetchPonyfill.

So I ran yarn add fetch-ponyfill to install. (For NPM users it would be npm i fetch-ponyfill)

...and then to import: import fetchPonyfill from 'fetch-ponyfill';