Next.js Discord

Discord Forum

useContext hook error while pre-rendering 404 page

Unanswered
giftedly posted this in #help-forum
Open in Discord
giftedlyOP
Hello y'all. I've just ran into the issue when building the page (not next dev) where my app won't build because of a hook. Here is the error in detail:
│    ▲ Next.js 15.2.0
│    - Environments: .env.local
│ 
│    Creating an optimized production build ...
│ Generated 0 documents in .contentlayer
│ (node:74237) ExperimentalWarning: Type Stripping is an experimental feature and might change at any time
│ (Use `node --trace-warnings ...` to show where the warning was created)
│ (node:74237) ExperimentalWarning: Type Stripping is an experimental feature and might change at any time
│ (Use `node --trace-warnings ...` to show where the warning was created)
│ (node:74237) [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///Volumes/Projects/Projects/MHSF/apps/www/tailwind-hero.config.ts?id=174
│ 5360796637 is not specified and it doesn't parse as CommonJS.
│ Reparsing as ES module because module syntax was detected. This incurs a performance overhead.
│ To eliminate this warning, add "type": "module" to /Volumes/Projects/Projects/MHSF/apps/www/package.json.
│  ✓ Compiled successfully
│    Skipping validation of types
│    Skipping linting
│  ⚠ Using edge runtime on a page currently disables static generation for that page
│  ✓ Collecting page data 
│ [TypeError: Cannot read properties of null (reading 'useContext')]
│ Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
│ TypeError: Cannot read properties of null (reading 'useContext')
│     at exports.useContext (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/styled-jsx/node_modules/react/cjs/react.production.js:49
│ 1:33)
│     at StyleRegistry (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/styled-jsx/dist/index/index.js:450:30)
│     at renderWithHooks (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4189:18)
│     at renderElement (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4327:14)
│     at retryNode (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4871:16)
│     at renderNodeDestructive (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:468
│ 9:7)
│     at renderElement (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4623:11)
│     at retryNode (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4871:16)
│     at renderNodeDestructive (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:468
│ 9:7)
│     at renderElement (/Volumes/Projects/Projects/MHSF/node_modules/next/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4623:11)
│ Export encountered an error on /_error: /404, exiting the build.
│  ⨯ Next.js build worker exited with code: 1 and signal: null
│ error Command failed with exit code 1.
│ info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
│ command finished with error: command (/Volumes/Projects/Projects/MHSF/apps/www) /var/folders/cc/n2tywg4j3094plvqnf4g23bc0000gn/T/yarn--17453607630
│ 79-0.2409533230899914/yarn run build exited (1)


- [Repository Code](https://github.com/DeveloLongScript/MHSF/tree/v2/apps/www)
- When using both Vercel and building locally arrises the same issue
- Adding/removing a 404 page doesn't help
- Completely rebuilding lock files/node-modules doesn't help

8 Replies

giftedlyOP
bumpifiable
giftedlyOP
bumpifiable
LuisLl
Your root layout is a client component and it shouldn't be. Your code attached:

"use client";
import "./globals.css";
import { useSearchParams } from "next/navigation";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const searchParams = useSearchParams();
  const search = searchParams?.get("theme") || "light";

  return (
    <html lang="en">
      <body className={inter.className}>
        <noscript>{children}</noscript>
        {children}
      </body>
    </html>
  );
}
I see you have MULTIPLE layouts following the same pattern + having <html> and <body> tags.
i will admit some of them do not need client components though
LuisLl
But that’s an easy fix, you only need certain components to have access to client APIs and interactivity you don’t need the whole layouts to be marked as client components
Make granular componentes that take care of accessing Client Only APIs.

I’d what you need is using SearchParams, then use client components with the useSearchParams hook, just not at the layout level, layouts should not be reading SearchParams, that’s exactly why they can’t access SearchParams through props, since they do not re-render.