"self is not defined" error in React after upgrading to 3.0.0

[karanmartian]

Hi, I just upgraded, but seeing this issue. Any suggestions?

/home/karan/Desktop/hbwapp/node_modules/whatwg-fetch/dist/fetch.umd.js:8
[0]     searchParams: 'URLSearchParams' in self,
[0]                                        ^
[0]
[0] ReferenceError: self is not defined
[0]     at /home/karan/Desktop/hbwapp/node_modules/whatwg-fetch/dist/fetch.umd.js:8:40
[0]     at support.searchParams (/home/karan/Desktop/hbwapp/node_modules/whatwg-fetch/dist/fetch.umd.js:2:66)
[0]     at Object.<anonymous> (/home/karan/Desktop/hbwapp/node_modules/whatwg-fetch/dist/fetch.umd.js:5:2)
[0]     at Module._compile (internal/modules/cjs/loader.js:702:30)
[0]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
[0]     at Module.load (internal/modules/cjs/loader.js:612:32)
[0]     at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
[0]     at Function.Module._load (internal/modules/cjs/loader.js:543:3)
[0]     at Module.require (internal/modules/cjs/loader.js:650:17)
[0]     at require (internal/modules/cjs/helpers.js:20:18)

[mislav]

Hi could you tell us more about your module loader setup? Where does this happen, during compilation or execution in the browser? The more information the better, thank you!

[davekedar]

What is the solution?

[mislav]

@davekedar Keep using 2.0.4 for now in your project.

Isn't fetch natively available in React Native? How come this polyfill is needed at all?

[karanmartian]

@mislav mine is a React project and not React Native. This error happens at build time. I assume i need this polyfill for plain React projects

[davekedar]

@mislav you are not getting the point, when we create the new project in Expo for react native it is fetching all the dependancies, thus this update is braking the initial loading.

@karanmartian you can try restrict the version to 2.0.4 untill we get solution for this, it worked for me in react native

[msafari]

I'm also seeing this exact error in our project which is a React project.

[msafari]

ok, changing to the new import { fetch as fetchPolyfill } from 'whatwg-fetch'
fixed it.
The issue was odd because our own package.json dependency is still on 2.0.4. But looks like isomorphic-fetch which is a dependency of one of our dependencies, pulls in the 3.0.0 and somehow our app tries to use the 3.0 version for our internal code as well instead of using 2.0.4.
Anyways, using the new import method seems to fix it.

[mislav]

@msafari Thank you for sharing!

@karanmartian @davekedar How is whatwg-fetch declared as a dependency in your projects? What happens if you try an ordinary import like import 'whatwg-fetch', and then use window.fetch() normally? (In React Native, it's highly likely that our polyfill isn't even needed.)

[msafari]

yeah I also swapped to use the native one earlier and works fine on all browsers including IE11. The polyfill wasn't even needed for our case :D

[mislav]

@msafari IE11 doesn't implement fetch natively. I guess if you're supporting IE, you should keep loading the polyfill, but you can load it like this import 'whatwg-fetch' and use fetch() (the global method on window) normally.

[msafari]

@mislav but that's exactly how we were using it that led to the react error mentioned in this issue with v3.0.0