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

[elia-orsini]

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]

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

[elia-orsini]

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]

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]

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.