Prerendering during build throwing error because react is undefined

Unanswered

!=tgt posted this in #help-forum

2026-01-28T17:54:49.089Z

I've come across a very peculiar error in my application recently. Building with next build causes an error related to prerendering to show up, specifically telling that useEffect and useContext are undefined

indicia-web:build: Error occurred prerendering page "/dashboard/search/intelligence/email". Read more: https://nextjs.org/docs/messages/prerender-error
  Generating static pages using 7 workers (8/55)  [=== ]TypeError: Cannot read properties of null (reading 'useEffect')
web:build:     at Analytics (src/app/analytics.tsx:8:12)
web:build:    6 |
web:build:    7 | export default function Analytics() {
web:build: >  8 |   useEffect(() => {
web:build:      |            ^
web:build:    9 |     (async () => {
web:build:   10 |       const { data: session } = await authClient.getSession();
web:build:   11 |       setUser({ {
web:build:   digest: '15498584'
web:build: }
web:build: Error occurred prerendering page "<rdacted>". Read more: https://nextjs.org/docs/messages/prerender-error

this happens on every page
analytics.tsx is imported in the root layout (server component), and the contents are

'use client';
import { authClient } from '@indicia/common/auth/client';
import { setUser } from '@sentry/nextjs';
import { configure } from 'onedollarstats';
import { useEffect } from 'react';

export default function Analytics() {
  useEffect(() => {
    (async () => {
      const { data: session } = await authClient.getSession();
      setUser({
        id: session?.user.id,
        email: session?.user.email,
        username: session?.user.username || undefined,
      });
    })();
  }, []);
  useEffect(() => {
    configure({
      trackLocalhostAs: 'indicia.app',
      // collectorUrl: '/api/as/events'
    });
  }, []);

  return null;
}

commenting out the hooks results in an error in a context component, which is also a client component

21 Replies

@!=tgt I've come across a very peculiar error in my application recently. Building with `next build` causes an error related to prerendering to show up, specifically telling that useEffect and useContext are undefined indicia-web:build: Error occurred prerendering page "/dashboard/search/intelligence/email". Read more: https://nextjs.org/docs/messages/prerender-error Generating static pages using 7 workers (8/55) [=== ]TypeError: Cannot read properties of null (reading 'useEffect') web:build: at Analytics (src/app/analytics.tsx:8:12) web:build: 6 | web:build: 7 | export default function Analytics() { web:build: > 8 | useEffect(() => { web:build: | ^ web:build: 9 | (async () => { web:build: 10 | const { data: session } = await authClient.getSession(); web:build: 11 | setUser({ { web:build: digest: '15498584' web:build: } web:build: Error occurred prerendering page "<rdacted>". Read more: https://nextjs.org/docs/messages/prerender-error this happens on every page analytics.tsx is imported in the root layout (server component), and the contents are tsx 'use client'; import { authClient } from '@indicia/common/auth/client'; import { setUser } from '@sentry/nextjs'; import { configure } from 'onedollarstats'; import { useEffect } from 'react'; export default function Analytics() { useEffect(() => { (async () => { const { data: session } = await authClient.getSession(); setUser({ id: session?.user.id, email: session?.user.email, username: session?.user.username || undefined, }); })(); }, []); useEffect(() => { configure({ trackLocalhostAs: 'indicia.app', // collectorUrl: '/api/as/events' }); }, []); return null; } commenting out the hooks results in an error in a context component, which is also a client component

B33fb0n3

2026-01-28T18:02:32.685Z

why are you making your life soo hard with the provider, the session and the useEffect?

This looks like a huge anti pattern for me and... as we see rn, it can cause unexpected errors.

Do help you out of there: do you have the session also serverside? iirc better-auth has it, right?

!=tgtOP

2026-01-28T18:24:15.847Z

yeah it does, but sentry needs the fn called clientside

also removing that code does not do anything

the provider i'm talking about is a custom sidebarprovider i wrote

commenting ALL providers out gives an internal nextjs error btw

let me get that real quick

Transvaal lion

2026-01-28T18:26:07.144Z

Which package manager you are using?

!=tgtOP

2026-01-28T18:26:11.753Z

pnpm

Transvaal lion

2026-01-28T18:27:32.977Z

Just for confirmation, Have you tried to delete node modules and .next folder?

!=tgtOP

2026-01-28T18:28:00.362Z

webweb:build: Check the top-level render call using <OuterLayoutRouter>. See https://react.dev/link/warning-keys for more information.
webweb:build: TypeError: Cannot read properties of null (reading 'useContext')
webweb:build:     at ignore-listed frames {
webweb:build:   digest: '3118097389'
webweb:build: }
webweb:build: Each child in a list should have a unique "key" prop.
webweb:build:
webweb:build: Check the top-level render call using <meta>. See https://react.dev/link/warning-keys for more information.
webweb:build: Each child in a list should have a unique "key" prop.
webweb:build:
webweb:build: Check the top-level render call using <head>. See https://react.dev/link/warning-keys for more information.
webweb:build: Error occurred prerendering page "/dashboard/search/intelligence/email". Read more: https://nextjs.org/docs/messages/prerender-error
  Generating static pages using 7 workers (8/55)  [ ===]TypeError: Cannot read properties of null (reading 'useContext')
webweb:build:     at ignore-listed frames {
webweb:build:   digest: '3118097389'
webweb:build: }
webweb:build: Error occurred prerendering page "redacted". Read more: https://nextjs.org/docs/messages/prerender-error
webweb:build: TypeError: Cannot read properties of null (reading 'useContext')
webweb:build:     at ignore-listed frames {
webweb:build:   digest: '3118097389'
webweb:build: }
webweb:build: Error occurred prerendering page "redacteds". Read more: https://nextjs.org/docs/messages/prerender-error
  Generating static pages using 7 workers (8/55)  [  ==]TypeError: Cannot read properties of null (reading 'useContext')
webweb:build:     at ignore-listed frames {
webweb:build:   digest: '3118097389'
webweb:build: }

@Transvaal lion Just for confirmation, Have you tried to delete node modules and .next folder?

!=tgtOP

2026-01-28T18:28:02.060Z

yep

Transvaal lion

2026-01-28T18:32:41.698Z

Is this happening in the latest nextjs or the older version also? May be try to downgrade react to 18 could solve?

Also, try to remove all 3rd party imports and add one by one and check any of those is giving error.

!=tgtOP

2026-01-28T18:33:58.157Z

latest,older vers, canary

older vers give an error relating to a unrelated lib bcs serverexternalpackages or something which is another can of worms

this app was building fine before

only change that happened was that there was this object that used to be imported in client and server components, and i changed stuff so that it's only imported in server components (nothing special like functions in it, the object's in a file that exports serverside js functions in a monorepo package)

B33fb0n3

2026-01-28T18:42:17.782Z

I tried to build a repo that reproduces this error, but I wasnt able to do that... can you provide a reproduction repo?

!=tgtOP

2026-01-28T18:59:45.964Z

thats funny

bcs i tried

btw the context is unrelated to the fetch

@!=tgt bcs i tried

B33fb0n3

2026-01-28T19:06:19.901Z

You also tried to reproduce the error out of your project, but couldn’t?

!=tgtOP

2026-01-28T19:09:34.399Z

yep

it's a complex application