Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

error in prod build for 9.0.0 firestore #5384

Closed
mikeover opened this issue Aug 26, 2021 · 11 comments · Fixed by #5461
Closed

error in prod build for 9.0.0 firestore #5384

mikeover opened this issue Aug 26, 2021 · 11 comments · Fixed by #5461
Assignees

Comments

@mikeover
Copy link

mikeover commented Aug 26, 2021

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:

Screen Shot 2021-08-26 at 2 40 19 PM

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
Copy link
Contributor

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
Copy link
Author

mikeover commented Aug 26, 2021

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?

Screen Shot 2021-08-26 at 3 10 11 PM

@NikolajLeischner
Copy link

NikolajLeischner commented Aug 31, 2021

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
Copy link

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
Copy link
Contributor

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?

@schmidt-sebastian schmidt-sebastian self-assigned this Sep 3, 2021
@ByronBos
Copy link

ByronBos commented Sep 4, 2021

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
Copy link
Contributor

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

@schmidt-sebastian
Copy link
Contributor

schmidt-sebastian commented Sep 7, 2021

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
Copy link
Contributor

@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
Copy link
Contributor

hsubox76 commented Sep 7, 2021

@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
Copy link

ByronBos commented Sep 7, 2021

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

@firebase firebase locked and limited conversation to collaborators Oct 10, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants