error in prod build for initing firestore

[mikeover]

Issue

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",
    ...

dependencies:

  "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"
  },

[jhuleatt]

Hi @mikeover, sorry to hear it isn't working.

I tried to reproduce this in https://stackblitz.com/edit/reactfire-v4-issue-433?file=index.js, but it seems to work without issue. Can you see a difference between my code and yours? If not, this may be a build issue or a JS SDK issue

Side note: since you're using ReactFire's concurrent mode features, it would be safest to follow the React docs' setup instructions using an experimental build of React and ReactDOM.unstable_createRoot instead of ReactDOM.render.

[jhuleatt]

note: this issue was also posted to firebase/firebase-js-sdk#5384

[jhuleatt]

Something else I noticed is that your yarn start script uses check-config and wraps the build with env-cmd, while yarn start:dist does not. env-cmd may set some environment variables that are important to your app, so maybe look into wrapping your start:dist command to something like:

"start:dist": "yarn check-config && env-cmd \"yarn build\" && firebase emulators:start --only hosting"

[mikeover]

thanks @jhuleatt , I coped your index.js from your stackblitz and ran it with yarn start:dist and it blew up in the same way so I am thinking it is a build issue. I tried your suggestions to the script but had the same result. Any other ideas for things I could try before I just revert back to v3?

[jhuleatt]

Hmm, my only other guess would be to try installing reactfire@exp. There's a chance that a recent commit (cc0c93e) made after ReactFire 4.0.0 was released may help.

[Feiyang1]

It seems to be a build/minification issue. Is it possible to disable minification in the prod build, so that we can pin down the root cause?

[epodol]

I am also having this issue. I am working on transitioning to firebase v9 and reactfire v4 and the preview channel is failing. Here is the code that is failing epodol/bsclibrary#349. (You can see a preview channel link there too)

[epodol]

After updating to reactfire@exp, the issue was resolved. Thanks!

[epodol]

@jhuleatt Do you think you could release a new version with these changes? Thanks!

[jhuleatt]

Thanks for confirming that it fixed the issue @epodol. Version 4.0.1 has been published to npm.