"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

[mislav]

@msafari Ah, I see.

[davekedar]

@mislav https://forums.expo.io/t/cant-find-variable-self/13547/9 please go through the link and you will find the problem and solution

this is
React Native with Expo environment

[AstRonin]

I have similar error on react-native v.0.55.4 with v.3.0.0
This suggestion import { fetch as fetchPolyfill } from 'whatwg-fetch' did not help...

[davekedar]

@AstRonin https://stackoverflow.com/questions/52269560/react-native-expo-cant-find-variable-self follow this question for the answer for the same, let me know if you can not solve it

[AstRonin]

yes, on v.2.0.4 library works, but I need implementation of Fetch Abort in v.3.0.0, thats why I need new version

[monsieurnebo]

Downgrading to v2.0.4 works.

[JustFly1984]

I'm confirming an issue in SSR React.js app with update to 3.0.0 from 2.0.4

[wmertens]

The problem is in the umd build. You can see it here: https://unpkg.com/whatwg-fetch@3.0.0/dist/fetch.umd.js

It references self but doesn't define it anywhere.

[mislav]

@wmertens self is a standard part of DOM and as such doesn't need to be defined anywhere to work. https://html.spec.whatwg.org/multipage/window-object.html#dom-self

[wmertens]

in that case, webpack 4 is somehow not doing that

[wmertens]

Oh I misread that - the problem is happening on the Node side, somehow Node was running whatwg-fetch on the server during SSR :-/ I'll need to investigate why that's happening, but then it's not a whatwg-fetch issue.

[mislav]

I'll need to investigate why that's happening, but then it's not a whatwg-fetch issue.

Please do investigate, I'd be grateful!

None of these reports sound like any of this is a whatwg-fetch issue. We built a polyfill for web browsers; our v3.0.0 works in every browser that we advertise supporting, as well as in service worker environment (that's why we use self instead of window). If a JavaScript execution environment doesn't implement basic DOM, maybe it shouldn't be trying to load our library meant for browsers.

[hansnull]

self might be undefined in unit tests.

[wmertens]

I must have been pulling in whatwg-fetch in node for a while now, and in 3.0 that started erroring? Not sure, in any case 3.0 works fine now, I cleaned up my imports a bit. Wout. On Nov 29, 2018 3:51 PM, "hansnull" <notifications@github.com> wrote: self might be undefined in unit tests. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#657 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWlrw0WZXsJ5diDXLfKYWIJsZSqpAvks5uz_RwgaJpZM4Wi73i> .

[rpellerin]

To fix this, an easy solution would be to add a browser field in package.json that points to dist/fetch.umd.js.
It would also help Webpack find the right file. (https://webpack.js.org/configuration/resolve/)

[monico-moreno]

Using the temp fix suggested in the above comment by @idMolotov 's , fixed my issue (for now).

Quoted temp fix below for convenience:

Now, the only solution is to rollback to the "whatwg-fetch": "^2.0.4". Be ready to rework 'Headers' to the standards objects.

[jamie-ctm]

I used node-fetch currently at 2.6.0 to get around this, rather than fetch.

[callumacrae]

This is also causing issues with server-side rendered Vue apps.

I'm not calling fetch on the backend—I would not expect that to work—but in 1.x and 2.x it was possible to import the library. Now it errors on import on the server which means it isn't possible to use this library in server-side rendered apps in the same way.

[mislav]

@kopax Your error says “Network request failed”, which leads me to believe it's a network-related runtime error and not a load error with this library, which this thread is all about.

[jungdj]

@mislav
As far as I know, this issue is a reoccurrence of #253
I just wonder why you reverted this change during the recent major update.

Hope it helps

[JakeChampion]

Fix for this will be #794

[karanmartian]

Hey Guys, please help after upgrading to latest version of whatwg-fetch

I am seeing this error

TypeError: Cannot use 'in' operator to search for 'URLSearchParams' in false
at /home/karan/Desktop/repos/idwapp/node_modules/whatwg-fetch/dist/fetch.umd.js:10:37
at /home/karan/Desktop/repos/idwapp/node_modules/whatwg-fetch/dist/fetch.umd.js:2:66
at Object. (/home/karan/Desktop/repos/idwapp/node_modules/whatwg-fetch/dist/fetch.umd.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:1158:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object. (/home/karan/Desktop/repos/idwapp/functions/index.js:1:143379)
error: Forever detected script exited with code: 1
error: Script restart attempt #9
/home/karan/Desktop/repos/idwapp/node_modules/whatwg-fetch/dist/fetch.umd.js:10
searchParams: 'URLSearchParams' in global,