Comments (6)
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).
from next-firebase-auth.
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'
).
from next-firebase-auth.
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!
from next-firebase-auth.
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.
from next-firebase-auth.
@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?
from next-firebase-auth.
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!
from next-firebase-auth.
Related Issues (20)
- Error: Invalid next-firebase-auth options: The "FIREBASE_AUTH_EMULATOR_HOST" environment variable should be the same as the host set in the config
- Add metaData / user data to AuthUser object HOT 4
- Why is databaseURL required during init? HOT 1
- Deploying on Vercel leads to 500 error for ssr-auth-required and ssr-no-token HOT 6
- Infinite rediect to login page when deploy to vercel
- When using 'next dev', two requests are sent to /login or /logout HOT 7
- Auth lost on refresh / navigation, but user stays logged in HOT 1
- firebaseAuthEmulatorHost is ignored and requests to live servers are made HOT 7
- Can I use this library with firebase latest version of firebase. HOT 2
- IdToken not being set as authorization header in axios interceptor on page load.
- Improve setAuthCookies types to no be necessary passing an empty object when not setting the token HOT 1
- Next 14 support HOT 1
- next-firebase-auth must be initialized before rendering. HOT 2
- TypeError: u[v] is not a function. (In 'u[v](x)', 'u[v]' is null)
- How to resolve the return type of getServerSideProps?
- Can't use firebase apps in getServerSideProps: "FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source." HOT 1
- Q: Anyway to use the login from a different nextJs app on the same domain?
- Add support for firebase-admin v12
- "Missing or insufficient permissions" when upgrading above 9.16.0 HOT 2
- Initialization takes 30 seconds with the error "Uncaught TypeError: u[v] is not a function" in Chrome for mobile devices HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-firebase-auth.