Can't find a variable atob

Question

Screen1.js

import React,{useEffect} from 'react'
import {View,Text} from 'react-native'
import * as firebase from 'firebase/app';
import '@firebase/firestore';

const Screen1 = props =>{

    useEffect(() => 
    {
        var dbh = firebase.firestore().collection("Jots").doc("note");
        dbh.set({name:"pradeep"}) //The yellow warning is popped up in this line.
    }); 

    return(
             <View>
                <Text>Title</Text>
             </View>
    )
}

console

[Unhandled promise rejection: ReferenceError: Can't find variable: atob]

Stack trace:
  node_modules\@firebase\firestore\dist\index.cjs.js:23101:0 in <global>
  http://192.168.0.108:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:131203:60 in fromBase64String

I just followed the guide in the expo documentation but still don't know why this problem is occurring. Need a clear explanation on this. And also what is atob variable?

Unless some package happens to name something else like that, `atob` is a function to decode a Base64 encoded String. `btoa`, on the other hand, encodes a String to Base64 ([Base64 encoding and decoding](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding)) — blex, Feb 23 '20 at 11:04
Thanks for the response. Why does this atob warning is shown here in the console? Can you figure out the issue here in the code? — Pradeep, Feb 23 '20 at 11:10
Pronably because the atob function is part of `window` in the browser env, which isn't available unless specifically ported over. You could try and download an NPM module. — Jesse Schokker, Feb 23 '20 at 11:17
For React Native use [`react-native-firebase`](https://invertase.io/oss/react-native-firebase/). — Christos Lytras, Feb 23 '20 at 13:07
can someone explain how to connect to firestore and why atob is happening? — Pradeep, Feb 23 '20 at 17:28
To see why this is happening check out Github fix which is not integrated yet: https://github.com/firebase/firebase-js-sdk/pull/2677 — Mugen, Mar 23 '20 at 07:32

score 44 · Accepted Answer · answered Feb 25 '20 at 03:08

44

I have tried downgrading but that's not resulted as a solution to me. I don't know why.

The global import of base64 in the app.js resolved this problem.

import {decode, encode} from 'base-64'

if (!global.btoa) {  global.btoa = encode }

if (!global.atob) { global.atob = decode }

Thanks for your responses.

answered Feb 25 '20 at 03:08

Pradeep

798
1
7
18

I upgraded but did nothing with firebase 7.9.3. This solution fixed it for me. – Fernando Rojo Mar 04 '20 at 23:31
2

also got the same with `7.11.0`, answer resolves the issue – Mugen Mar 22 '20 at 16:02
1

Same here with `7.14.0` – Baptiste Arnaud Apr 10 '20 at 08:38
Thanks a lot. This solution worked for me, while facing same issue with 7.14.0! – lyrio Apr 15 '20 at 12:31
Thank you for your code. This is my solution for this error. – DiaMaBo Apr 18 '20 at 23:13
1

For TypeScript I had to add `const globalAny: any = global;` to make it work and then use the `globalAny` field instead of `global`. – 0x4b50 Apr 26 '20 at 14:22
This seems to be an issue again in firebase 7.14.3, only the above solution no longer remedies the problem – Carrie M. May 27 '20 at 07:38

score 11 · Answer 2 · answered Feb 24 '20 at 12:47

11

Worked for me ! Thanks papay0, there is indeed something wrong with version 7.9.1.

npm install firebase@7.9.0
expo r -c # restard expo without cache

You can rm -rf ./node_modules/ && npm i

answered Feb 24 '20 at 12:47

Eydwales

251
4
9

score 7 · Answer 3 · answered Feb 24 '20 at 03:05

7

I found a workaround, I still there is a bug on their side. They just released 2 days ago version 7.9.1. Try to use 7.9.0.

yarn add firebase@7.9.0

I am creating an issue for it, follow here.

answered Feb 24 '20 at 03:05

papay0

1,311
1
12
25

thanks for the response still the downgrading to the lower version doesn't help. It stillsays 'can't find variable atob'. – Pradeep Feb 24 '20 at 03:23
should I wrap the JSON with atob? – Pradeep Feb 24 '20 at 03:25

score 1 · Answer 4 · answered May 07 '20 at 13:41

Thanks @Pradeep. This worked for me on firebase 7.14.1:

import {decode, encode} from 'base-64'

if (!global.btoa) {  global.btoa = encode }

if (!global.atob) { global.atob = decode }

and using import like this

import firebase from 'firebase';
import 'firebase/firestore'

score 0 · Answer 5 · answered Feb 08 '23 at 08:53

0

The atob function is part of the JavaScript window object and is not available in React Native.

To decode base64-encoded data in React Native, you can use the base-64 library

answered Feb 08 '23 at 08:53

Zahir Masoodi

546
7
23

Can't find a variable atob

5 Answers5

Linked

Related