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

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)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 49
Comments: 44 (10 by maintainers)

Commits related to this issue

Rely on cross-fetch And rely on cross-fetch directly, as that version provides the desired interface. Due to "self is not defined" https://github.com/github/fetch/issues/657 — committed to Empact/react-native by Empact 5 years ago
Rely on fetch-ponyfill Due to "self is not defined" https://github.com/github/fetch/issues/657 — committed to Empact/react-native by Empact 5 years ago
Rely on fetch-ponyfill Due to "self is not defined" https://github.com/github/fetch/issues/125 https://github.com/github/fetch/issues/657 — committed to Empact/react-native by Empact 5 years ago
Rely on cross-fetch And rely on cross-fetch directly, as that version provides the desired interface. Due to "self is not defined" https://github.com/github/fetch/issues/657 — committed to Empact/react-native by Empact 5 years ago
Rely on cross-fetch Due to "self is not defined" https://github.com/github/fetch/issues/657 — committed to Empact/react-native by Empact 5 years ago
fix for whatwg-fetch@3.0.0 issue in node https://github.com/github/fetch/issues/657 — committed to trezor/trezor-link by szymonlesisz 5 years ago
Downgrade fetch polyfill See https://github.com/github/fetch/issues/657 — committed to parzhitsky/jest-triage by parzhitsky 4 years ago
fix(fetch) polyfill fails SSR https://github.com/github/fetch/issues/657 — committed to welovedevs/react-ultimate-resume by clementdevos 4 years ago
chore(whatwg-fetch): downgrade to 2.0.4 see https://github.com/github/fetch/issues/657 Signed-off-by: Patrick Ludewig <yes@patrick.works> — committed to Maybach91/react-giphy-picker by Maybach91 4 years ago
use `this` if `self` is not defined fixes https://github.com/github/fetch/issues/657 — committed to JakeChampion/fetch by JakeChampion 4 years ago
use `this` if `self` is not defined fixes https://github.com/github/fetch/issues/657 — committed to JakeChampion/fetch by JakeChampion 4 years ago
use `this` if `self` is not defined fixes https://github.com/github/fetch/issues/657 — committed to cr313/fetch-Js-flow by cr313 4 years ago

Most upvoted comments

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

+10

JustFly1984 on Oct 29, 2018

@kopax Try to use cross-fetch as @lquixada told.

TimurAsayonok on Jan 18, 2019

self might be undefined in unit tests.

hansnull on Nov 29, 2018

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!

mislav on Sep 11, 2018

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.<anonymous> (/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.<anonymous> (/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,

karanmartian on Aug 6, 2020

The problem is still exists.

Trying to render component within SSR:

....../node_modules/whatwg-fetch/dist/fetch.umd.js:8
    searchParams: 'URLSearchParams' in self,
                                       ^
ReferenceError: self is not defined
    at ....../node_modules/whatwg-fetch/dist/fetch.umd.js:8:40
    at support.searchParams (....../node_modules/whatwg-fetch/dist/fetch.umd.js:2:66)
    at Object.<anonymous> (....../node_modules/whatwg-fetch/dist/fetch.umd.js:5:2)
    at Module._compile (module.js:653:30)
    at Module._compile (....../node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (module.js:664:10)
    at Object.newLoader [as .js] (....../node_modules/pirates/lib/index.js:104:7)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)

Switching on the cross-fetch@3.0.1 is not working due to the using of the same version of the whatwg-fetch@3.0.0 inside it.

Now, the only solution is to rollback to the “whatwg-fetch”: “^2.0.4”. Be ready to rework ‘Headers’ to the standards objects.

idMolotov on Feb 28, 2019

@lquixada Yes, I have test it on IOS and looks like working. Thank you!

TimurAsayonok on Jan 16, 2019

just wanted to let you guys know that if you want the whatwg-fetch v3 to work on React Native or IE11, please take a look at cross-fetch. It wraps a script around the latest version of whatwg-fetch to handle the incompatibilities.

lquixada on Jan 16, 2019

I use the latest version of React Native and wikijs that uses the latest version of whatwg-fetch. It doesn’t work but if I enable the debug function it works correctly. I don’t know if this can be useful. Here is my file package.

{ "name": "", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "axios": "^0.18.0", "querystring": "^0.2.0", "react": "16.6.3", "react-native": "0.57.7", "react-native-elements": "^0.19.1", "react-native-vector-icons": "^6.1.0", "react-navigation": "3.0.5", "react-navigation-tabs": "1.0.1", "react-redux": "^6.0.0", "redux": "^4.0.1", "redux-persist": "^5.10.0", "redux-thunk": "^2.3.0", "reselect": "^4.0.0", "wikijs": "4.10.0", "xmldom": "^0.1.27", "xpath": "0.0.27" }, "devDependencies": { "babel-jest": "23.6.0", "jest": "23.6.0", "metro-react-native-babel-preset": "0.49.2", "react-test-renderer": "16.6.1" }, "jest": { "preset": "react-native" } }

simulator screen shot - iphone x - 2018-12-04 at 20 25 26

invyctus92 on Dec 8, 2018

It was fixed here: https://github.com/facebook/react-native/pull/10247

spinualexandru on Dec 5, 2018

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.

wmertens on Nov 20, 2018

in that case, webpack 4 is somehow not doing that

wmertens on Nov 20, 2018

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

AstRonin on Sep 20, 2018

@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

davekedar on Sep 20, 2018

@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?

mislav on Sep 11, 2018