Firebase-js-sdk: 7.13.2 has unhandled promise rejection Wu.getRandomValues is undefined

[pdugan20]

Describe your environment

• Operating System version: react native 0.61
• Browser version: n/a
• Firebase SDK version: 7.13.2
• Firebase Product: firestore

Describe the problem

Getting the following error when trying to initialize within react native:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'Wu.getRandomValues')]

Not sure what Wu is, is that referring to Kai Wu?

Steps to reproduce:

Try and initialize firebase within a react native environment.

Relevant Code:

import Constants from 'expo-constants';
import { decode, encode } from 'base-64';
import firebase from 'firebase';
import '@firebase/firestore';

global.btoa = encode;
global.atob = decode;
global.crypto = {};

global.crypto.getRandomValues = (byteArray) => {
    for (let i = 0; i < byteArray.length; i += 1) {
        byteArray[i] = Math.floor(256 * Math.random());
    }
};

class Fire {
    constructor() {
        if (!firebase.apps.length) {
            firebase.initializeApp(Constants.manifest.extra.firebaseConfig);
        }
    }
}

Fire.shared = new Fire();

export const db = firebase.firestore();
export const storage = firebase.storage();
export const auth = firebase.auth();

export default Fire;

[schmidt-sebastian]

@pdugan20 Thanks for filing this issue.

@dconeybe The following line is likely the culprit:

const crypto = window.crypto || (window as any).msCrypto;

msCrypto is not in any of the .d.ts files we include here: https://github.com/firebase/firebase-js-sdk/blob/master/packages/firestore/externs.json Hence, it gets mangled.

Since we likely don't want to include an externs file just for this, your best bet may be to use object-literal access: window["msCrypto"] (please verify that this does work - the best build for these kind of verifications is the 'dist/index.esm2017.js' build.

If I interpet this issue correctly. "crypto" is also not available in ReactNative. Otherwise, msCrypto should never get evaluated. Do we need to provide a fallback to Math.random()?

[RWOverdijk]

I get this on @firebase/[email protected].

[IjzerenHein]

I get this on @firebase/[email protected].

@RWOverdijk Yes at the moment the latest working version for react-native seems to be 7.9.0

https://github.com/expo/expo/issues/7507#issuecomment-608299120

[IjzerenHein]

If I interpet this issue correctly. "crypto" is also not available in ReactNative. Otherwise, msCrypto should never get evaluated. Do we need to provide a fallback to Math.random()?

@schmidt-sebastian Yes this does seem to be the case. At the moment this is breaking the react-native support so a fallback to Math.random would be great on the platforms that don't support crypto.

[dconeybe]

I've reverted this "crypto" change for now. Our next release will therefore fix this error.

[IjzerenHein]

I've reverted this "crypto" change for now. Our next release will therefore fix this error.

Awesome great to hear @dconeybe !

There is currently another issue which breaks the react-native supported due to the absence of atob in the pure js environment. Is this something you also plan on addressing?

[dconeybe]

There are no immediate plans to fix that issue at the moment unfortunately. We are, however, aware of the issue. For now, you will just need to continue to polyfill atob and btoa.

[pdugan20]

@dconeybe thanks for the quick fix! appreciate it!

[IjzerenHein]

Alright thanks for the info @dconeybe !