withAuthUser() HOC prevents Fast Refreshing / HMR

[timfee]

Description

When editing a Component that is wrapped with withAuthUser({}), React performs full-page refreshes; for example:

export default withAuthUser({
  whenAuthed: AuthAction.REDIRECT_TO_APP,
  whenUnauthedBeforeInit: AuthAction.RETURN_NULL,
  whenUnauthedAfterInit: AuthAction.RENDER,
})(Auth)

Version

Using the example's version: "0.13.0-alpha.4"

To Reproduce

1. Clone the gladly-team/next-firebase-auth repo as is
2. yarn dev in the examples directory
3. Navigate to auth.js, doesn't matter if you're signed in or not.
4. Make a trivial change (it doesn't actually even need to cause the DOM to get re-rendered).
5. Observe that the entire page refreshes.

Additional context

The warning in the console:

[Fast Refresh] performing full reload

Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.
You might have a file which exports a React component but also exports a value that is imported by a non-React component file.
Consider migrating the non-React component export to a separate file and importing it into both files.

It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.
Fast Refresh requires at least one parent function component in your React tree.

Expected behavior

• HMR works :)

If this is unavoidable without additional configuration, it'd be awesome to capture the necessary steps somewhere in the example or in the doc. And if it's totally unavoidable, it might be a good FAQ note :)

[kmjennison]

I confirmed this problem doesn't happen if you remove withAuthUser from the page.

I tried breaking useAuthUser into separate modules in case the two exports (the context provider and useAuthUser hook) caused this issue, but that didn't fix it.

Very much welcome help on this!

[timfee]

So this is interesting. HMR seems to work for my project I'm tinkering with: https://github.com/timfee/slot.fyi.

Highlights:

• my app.tsx is wrapped as such:

       <Layout>
          <Component {...pageProps} />
        </Layout>

• layout.tsx is where I wrapped the HOC

import { FC } from 'react'
import { useAuthUser, withAuthUser } from 'next-firebase-auth'

const Layout: FC = ({ children }) => {
  // snip

  return (
    <>
            { /* snip */ }
            {!auth.firebaseUser && auth.clientInitialized && (
              <button className="px-3 py-2 bg-yellow-300 rounded">
                Sign in
              </button>
            )}
      <main className="max-w-4xl px-6 mx-auto mt-8">{children}</main>
    </>
  )
}

export default withAuthUser({})(Layout)

• an actual inner page is:

import { Profile } from '@/components/settings/account/Profile'
import { CalendarList } from '@/components/settings/calendars/CalendarList'
import { useCollection } from '@/hooks/useCollection'
import { useDocument } from '@/hooks/useDocument'
import firebase from '@/lib/firebase'
import { UserType } from '@/types/user'
import {
  AuthAction,
  getFirebaseAdmin,
  useAuthUser,
  withAuthUser,
  withAuthUserTokenSSR
} from 'next-firebase-auth'

import { FC } from 'react'

const Account: FC<any> = ({
  meta
}: {
  meta: {
    uid: string
    displayName: string
    emailAddress: string
    photoUrl: string
  }
}) => {
  const authUser = useAuthUser()
  // snip

  return (
    <>
      <Profile
        data={typeof profileData === 'undefined' ? null : profileData.data()}
      />
    </>
  )
}

export const getServerSideProps = withAuthUserTokenSSR({
  whenUnauthed: AuthAction.REDIRECT_TO_LOGIN
})(async ({ AuthUser }) => {
  const UserRecord: UserType = (
    await getFirebaseAdmin().firestore().doc(`/users/${AuthUser.id}`).get()
  ).data()

  console.log(UserRecord)
  const {
    uid,
    meta: { displayName, emailAddress, photoUrl }
  } = UserRecord

  return {
    props: {
      meta: {
        uid,
        displayName,
        emailAddress,
        photoUrl
      }
    }
  }
})

export default withAuthUser({})(Account)

I have no idea why this works, but wanted to share.

[Izhaki]

Spent 5 hours on this, and while I don't have a solution, I think I've homed in on the issue (and it's a mega issue if I'm correct)...

One of the oddest issues ever

Basically, if you reduce withAuthUser to this minimal function:

const withAuthUser = ({} = {}) => (ChildComponent) => {
  /* 1 */ const WithAuthUserHOC = (props) => <ChildComponent {...props} /> // Doesn't work
  /* 2 */ const WithAuthUserHOC = ChildComponent // Works

  return WithAuthUserHOC
}

Then Fast Refresh does not work with /* 1 */, but it does with /* 2 */.

This is super odd. So odd, that my immediate suspicion was that something's wrong with the build/transpilation.

So I've put webpack in development mode in order to see what the transpiled code under build looks like and boom... /* 1 */ was suddenly working.

Now this is the first library I see that exports a node distribution (specifically of React components) the way this one does (using webpack). build/index.node.js is littered with webpack stuff that is completely unnecessary - either babel alone or rollup would normally be used in these cases (and we should also mention esm distributions rather than CommonJS, specifically if this is a library for NextJS, which uses WebPack where esm has many benefits).

Anyhow, if indeed someone confirms that Fast Refresh works when webpack is in development mode, I strongly suspect there is something wrong with the way this library is built for node.

And another one

Also part of the investigation, I had NextJs in example building the library code directly. When I did this, I got the blue NextJS warning that isClientSide is not Fast Refresh compliant (It does have an unnamed default export: export default () => typeof window !== 'undefined').

[Izhaki]

OK. I know what the issue is.

It is the fact that the library is split distributed with client methods under "browser" in package.json and server under "main". This seems to confuse fast refresh (my theory is that when it tries to replace the modified file it sends to the client the server version of the file, but it can't find it on the client because the client module is not in the same format).

What I've done:

• Remove the webpack builds for both client and server.
• Created a single esm build.
• Commented out any server related exports (only testing /auth page).
• Fast refresh works.

I'm going to create a new issue regarding how this library is built, with a proposal for a "uni-build", this will have many benefits, but it'll be a breaking change (change to import location for any server related functions).

[yagudaev]

@Izhaki I've actually hit the same issue without even using this library.

As you mentioned, anytime you use a HOC on a next.js page it doesn't work. Here is a quick demo: https://stackblitz.com/edit/nextjs-77e7qw?file=pages/index.js

Any other thoughts or updates? Is this NextJS issue? Or there is a different way to a user be authenticated that might work better?

[kmjennison]

This bug appears to be fixed on v1.x with peer dependencies:

"firebase": "^9.9.1",
"firebase-admin": "^11.0.0",
"next": "12.2.3",
"react": "18.2.0",
"react-dom": "18.2.0",

I attempted to reproduce the problem here, but HMR is working as expected:
#550

It was fixed in v1.0.0-canary.12, possibly because of changing index.server.js to not import from index.js in #512—but we have not investigated the underlying reason. (Unintentional bug fix? We'll take it!)

The bug persists on v0.x:
#551

Closing this!