error in prod build for 9.0.0 firestore

[mikeover]

Describe your environment

• Operating System version: MacOS
• Browser version: Chrome 91
• Firebase SDK version: 9.0.0
• Firebase Product: firestore

Describe the problem

Works fine in dev but when building for production, I get a blank screen and this error in the console:

Steps to reproduce:

This runs fine with yarn start but fails after building for production with yarn start:dist (see package.json scripts below).

Relevant Code:

index.jsx:

import React from 'react'
import ReactDOM from 'react-dom'
import config from 'config'
import { version } from '../package.json'
import App from './App'
import { init as initErrorHandling } from './utils/errorHandler'
import { FirebaseAppProvider, SuspenseWithPerf } from 'reactfire'
import LoadingSpinner from 'components/LoadingSpinner'
import './index.css'

window.version = version
window.config = config

initErrorHandling()

ReactDOM.render(
  <SuspenseWithPerf traceId={'firebase-user-wait'} fallback={<LoadingSpinner />}>
    <FirebaseAppProvider firebaseConfig={config.firebase} suspense={true}>
      <App />
    </FirebaseAppProvider>
  </SuspenseWithPerf>,
  document.getElementById('root')
)

App.js:

import React from 'react'
import { FirestoreProvider, useInitFirestore } from 'reactfire'
import { initializeFirestore } from 'firebase/firestore'

function App() {
  function FirestoreWrapper({ children }) {
    const { data: firestoreInstance } = useInitFirestore(async (firebaseApp) => {
      const db = initializeFirestore(firebaseApp, {})
      return db
    })
    return <FirestoreProvider sdk={firestoreInstance}>{children}</FirestoreProvider>
  }
  return (
    <FirestoreWrapper>
      <div>my app</div>
    </FirestoreWrapper>
  )
}

export default App

package.json scripts:

  "scripts": {
    "build": "craco build",
    "eject": "craco eject",
    "setup": "echo \"Generating client config...\" && env-cmd bin/generate-firebase-sdk-config.js --file ./config/default.json",
    "check-config": "if [ ! -f ./src/client-config.json ]; then yarn setup; else echo \"Client config already exists, running command...\"; fi;",
    "start": "yarn check-config && env-cmd craco start",
    "start:dist": "yarn build && firebase emulators:start --only hosting",
    "start:emulate": "cross-env NODE_APP_INSTANCE=emulators yarn start",
    ...

deps:

  "dependencies": {
    "@material-ui/core": "^4.12.2",
    "@material-ui/data-grid": "^4.0.0-alpha.33",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@sentry/browser": "^6.10.0",
    "clsx": "^1.1.1",
    "draft-js": "^0.11.7",
    "draft-js-wysiwyg": "^1.2.0",
    "draftjs-to-html": "^0.9.1",
    "firebase": "^9.0.0",
    "html-to-draftjs": "^1.5.0",
    "lodash": "^4.17.21",
    "luxon": "^2.0.1",
    "material-ui-confirm": "^2.1.3",
    "notistack": "^1.0.9",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^17.0.2",
    "react-draft-wysiwyg": "^1.14.7",
    "react-google-button": "^0.7.2",
    "react-hook-form": "^7.11.1",
    "react-router-dom": "^5.2.0",
    "reactfire": "^4.0.0",
    "stackdriver-errors-js": "^0.8.0",
    "uuid": "^8.3.2"
  },

[schmidt-sebastian]

This is a bit strange as we only ship one build configuration. Do you have sourcemaps so we can figure out where your stacktraces are from?

[mikeover]

This is a bit strange as we only ship one build configuration. Do you have sourcemaps so we can figure out where your stacktraces are from?

I do not, not sure how to get them...?

but might this help?

[NikolajLeischner]

I get the same error upon calling initializeFirestore in a build bundled with cra 4.0.3. Calling getFirestore instead works, so that might be a workaround, if you don't actually need to specify any settings.

[ByronBos]

Similarly have this issue using initializeFirestore, in my case there are settings I need to specify so switching to getFirestore isn't a fix.
Given it's just production builds I'm wondering if it could be the result of minification or other optimisations.

[schmidt-sebastian]

I am getting quite a few errors setting up an app from the source snippets you provided. Would you be able to upload a complete configuration to a GitHub repo?

[ByronBos]

Not the original raiser of this issue but I created a minimal react project that replicates what I believe is the same problem.
It's basically just the default app created with Create React App.

Hopefully it's useful.

https://github.com/ByronBos/firebase-issue-5384-example

[schmidt-sebastian]

@ByronBos Thank you. I am able to reproduce the issue using your example.

[schmidt-sebastian]

Some random notes while I am still trying to figure this out:

function _e(e, t) { // initializeFirestore
    var n = r(e, "firestore");
    if (n.isInitialized()) {
        ...
    }
    if (void 0 !== t.cacheSizeBytes && -1 !== t.cacheSizeBytes && t.cacheSizeBytes < 1048576)
        throw new O(T.INVALID_ARGUMENT,"cacheSizeBytes must be at least 1048576");
    return n.initialize({
        options: t
    })
}
function Te() { // getFirestore
    var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : Object(d.e)();
    return Object(d.b)(e, "firestore").getImmediate()
}

Both functions call _getProvider() at first. initializeFirestore does this using r(e, "firestore") (where r is not defined) and getFirestore calls Object(d.b)(e, "firestore").

This seems to be a problem with Webpack that we are triggering somehow.

[schmidt-sebastian]

@hsubox76 was able to figure out what is going on here. The Babel configuration that is used here transpiles our code from ES6 to ES5, which turns let to var somewhere in this function:

ES6:
function kc(e, n) {
    const s = t(e, "firestore");
    if (s.isInitialized()) {
        const t = s.getImmediate(), e = s.getOptions();
       ...
   }
}

ES5:
function kc(e, n) {
    var s = t(e, "firestore");
    if (s.isInitialized()) {
        var t = s.getImmediate(), e = s.getOptions();  // This overrides the `t` above 
       ...
   }
}

You can work around this by using our esm5 source file directly (index.esm5.js) or by re-configuring your Babel configuration to use ES6 as its output format.

We will figure out what the next steps are, but the problem seems to be in the tooling that is used here and as such we cannot control when this gets fixed.

[hsubox76]

@ByronBos I will try to file an issue with Babel or Create React App and I would like to use your minimal repro, is that okay? If so, let me know and don't delete or modify it. Thanks!

[ByronBos]

@hsubox76 Yeah not a problem at all! Glad it's useful.