Next.js Discord

Discord Forum

TypeError: (0 , apps_encyclopedia_junior_frontend_hooks_useUser__WEBPACK_IMPORTED_MODULE_1__.default

Unanswered
Gray Wagtail posted this in #help-forum
Open in Discord
Gray WagtailOP
When migrating one of our apps from v13 to v14, most stuff works fine, but this hook gets this error for some reason, and not on every page.
This is how the render tree goes until the hook is used:
// app/layout.tsx
<body>
  <Providers config={config} translations={translations}>
    <AppLayout>{children}</AppLayout>
  </Providers>
</body>

// AppLayout.tsx - client component
<UserContextProvider user={data?.data.user}>
  <Box>
    <Header />
    ...
  </Box>
</UserContextProvider>

// Header.tsx - client component
<Box>
  <Navbar />
</Box>

// Navbar.tsx - client component
const Navbar = () => {
  const { appTitle, links } = useConfig<EncyJuniorTenantConfiguration>();
  const user = useUser();
  const { t } = useTranslate<EncyclopediaJuniorCommon>('common');

It crashes as soon as useUser is referenced, and the error seemingly only happens on server side. Other custom hooks work just fine. And it only happens on some pages to make things weirder (maybe got something to do with the request, still weird)

4 Replies

Gray WagtailOP
As you can see, the Header (and its child Navbar) are wrapped in a UserContextProvider, and the context does log a value before the crash eventually happens when loading the page
Gray WagtailOP
If I move the hook code into the files directly (every component that tries to import useUser get this error when I try) it works
const useUser = (): User => {
  const context = useContext(UserContext);
  assertNonNullish(context);
  return context;
};
Keep in mind this worked just fine in 13.3 so I don't think the code itself is bad, but clearly something has changed in the compiling that causes seemingly a race condition?
Gray WagtailOP
After a lot of testing it seems to be circular dependencies, after removing a barrel file or two, it solved the issue. Closing.