Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

How to tackle the "Cannot read properties of null" error during build time in a Next.js project

7 replies
Last updated: Feb 19, 2023
Hello fellow devs, upon doing either npm run build or yarn build i have come across this error, Cannot read properties of null (reading 'mainImage'). How can I tackle this issue? I would appreciate any form of help. Thank you. Ill be attaching the screenshots. First one is page.tsx at '*[project]/app/(user)/post/[slug]/page.tsx*', the error originated from line 53. Second one is post.tsx at '*[project]/schemas/post.ts*', where the type of the field is defined. Third image provides an high level view of the project along with the caught error message in the terminal.
Feb 19, 2023, 10:17 AM
There is data in mainImage. just checked by querying
Feb 19, 2023, 10:42 AM
From what I understand, you are exporting async function as component ? You should instead export a component and use async hook :
export function Post(props) {
    const post = usePost(props.slug); // <- async function
    if(post) {
       return null // <- or loader
    }
    return (
        //<- JSX of your component
    )
}
Feb 19, 2023, 11:21 AM
Cannot read properties of null (reading 'mainImage')
Indicates that you are trying accessing 
null.mainImage
not that 
mainImage
is null
Feb 19, 2023, 11:23 AM
Hey
user Q
thanks for replying. Ive been trying to implement your suggested solution but i think i a going wrong somewhere syntactically. I am relatively new to typescript, nextjs and sanity.
Feb 19, 2023, 9:02 PM
i am facing this issue during build time ie when i do npm run build or yarn build otherwise this application is working fine on my locacl server
Feb 19, 2023, 9:02 PM
is there any other approach that i could try
Feb 19, 2023, 9:08 PM
actually your solution worked just had to add this line if (!post){ return null;
}
Feb 19, 2023, 10:09 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
Deploying Next JS on VercelJan 20, 2021
DOMParser is not defined at defaultParseHtmlDec 3, 2020
Error in Next.js tutorial with event handlers in server components.Feb 28, 2024
Discussion about the root layout for a website and how to properly implement it using Next.js.Apr 4, 2024
Hi all! Does anyone have problem on deoplloying on Vercel (Using Next. js as a frontend)? I have two test projects, andonce...Jan 25, 2021
How to Disallow Robots on a SubdomainNov 12, 2020
Troubleshooting reference fields in a Next.js Landing page templateMay 2, 2020
Restoring accidentally deleted documents in Sanity dataset without exporting.Jun 25, 2020
Help with Preview Mode and Next.js, issue with previewing draft changes from already published docSep 3, 2020
Discussion on using ISR and revalidation in Next.js to update content changes in Sanity StudioJan 7, 2021

Related contributions

Turbo Start Sanity
Template

Featured

The battle-tested Sanity template that powers Roboto Studio's websites

Schema UI - Next.js Sanity Starter
Template

Featured

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko

The Swaddle
Made with Sanity

Featured

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar