[go: nahoru, domu]
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.

Sign up for GitHub

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

Jump to bottom

error in prod build for initing firestore #433

Closed
mikeover opened this issue Aug 26, 2021 · 10 comments
Closed

error in prod build for initing firestore #433

mikeover opened this issue Aug 26, 2021 · 10 comments

Comments

@mikeover
Copy link
mikeover commented Aug 26, 2021 •
edited
Loading

Issue

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

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
Copy link
Collaborator
jhuleatt commented Aug 26, 2021 •
edited
Loading

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

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

@jhuleatt
Copy link
Collaborator

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

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?

@mikeover mikeover mentioned this issue Aug 26, 2021
Open
@jhuleatt
Copy link
Collaborator

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

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
Copy link
Contributor
epodol commented Aug 29, 2021

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
Copy link
Contributor
epodol commented Aug 29, 2021

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

@epodol
Copy link
Contributor
epodol commented Aug 31, 2021

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

@jhuleatt
Copy link
Collaborator
jhuleatt commented Sep 1, 2021

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

@jhuleatt jhuleatt closed this as completed Sep 1, 2021
@FirebaseExtended FirebaseExtended locked and limited conversation to collaborators Oct 2, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jhuleatt @Feiyang1 @mikeover @epodol