CSFrequency/react-firebase-hooks

TypeError: Cannot read properties of null (reading 'useReducer')

elia-orsini opened this issue · 4 comments

elia-orsini commented

I'm using React with Remix for my app. The following code:

import firebase from 'firebase/compat/app'; 
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

import { useAuthState } from 'react-firebase-hooks/auth'

firebase.initializeApp({
    // config
})

const auth = firebase.auth()
const firestore = firebase.firestore()

const [ user ] = useAuthState(auth)

gives the following error:

TypeError: Cannot read properties of null (reading 'useReducer')
    at Object.useReducer (/Users/el/Documents/pl/node_modules/react/cjs/react.development.js:1626:21)
    at useLoadingValue (/Users/el/Documents/pl/node_modules/react-firebase-hooks/auth/dist/index.cjs.js:107:20)
    at useAuthState (/Users/el/Documents/pl/node_modules/react-firebase-hooks/auth/dist/index.cjs.js:129:14)
    at Object.<anonymous> (/Users/el/Documents/pl/app/routes/plants/chat.jsx:21:16)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Function.Module._load (node:internal/modules/cjs/loader:834:12)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /Users/el/Documents/pl/node_modules/@remix-run/serve/dist/index.js:43:17
    at Layer.handle [as handle_request] (/Users/el/Documents/pl/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/el/Documents/pl/node_modules/express/lib/router/route.js:144:13)
    at next (/Users/el/Documents/pl/node_modules/express/lib/router/route.js:138:14)
    at next (/Users/el/Documents/pl/node_modules/express/lib/router/route.js:138:14)
    at next (/Users/el/Documents/pl/node_modules/express/lib/router/route.js:138:14)

I am not really sure if I am doing something wrong when using that hook useAuthState(auth)

skreutzberger commented

Did you solve the issue? I am asking because I have the same.

elia-orsini commented

hey @skreutzberger, I think the problem I was having was due to the fact that I was using Remix and that code is not meant to be run on the server. If you are using remix you can run something only on the client side in this way: https://remix.run/docs/en/v1/guides/constraints#document-guard

skreutzberger commented

ah I see, so that actually also matches my problem with Next.js which is rendering stuff on the server. Thanks! I will wrap the call as discussed at your link. Thank you for the quick reply!

paulhmurray commented

hey, is there any chance either one, could share a little more detail on how you resolved this. I'm running nextjs and cannot get passed this issue. Weirdly, I was on 13.0.3 and upgraded to 0.5, that resolved the issue for a moment, but reverted, and of course, i'm not sure what i did in that time to cause it to regress. Any pointers would be greatly appreciated.

  • 👍1