error in prod build for initing firestore

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]

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

[epodol]

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