Prerendering during build throwing error because react is undefined
Unanswered
!=tgt posted this in #help-forum
!=tgtOP
I've come across a very peculiar error in my application recently. Building with
this happens on every page
analytics.tsx is imported in the root layout (server component), and the contents are
commenting out the hooks results in an error in a context component, which is also a client component
next build causes an error related to prerendering to show up, specifically telling that useEffect and useContext are undefinedindicia-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-errorthis 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
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?
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
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
commenting ALL providers out gives an internal nextjs error btw
let me get that real quick
Transvaal lion
Which package manager you are using?
!=tgtOP
pnpm
Transvaal lion
Just for confirmation, Have you tried to delete node modules and .next folder?
!=tgtOP
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
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.
Also, try to remove all 3rd party imports and add one by one and check any of those is giving error.
!=tgtOP
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
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)
I tried to build a repo that reproduces this error, but I wasnt able to do that... can you provide a reproduction repo?
@!=tgt bcs i tried
You also tried to reproduce the error out of your project, but couldn’t?
!=tgtOP
yep
it's a complex application