summer copper
I tried to build the next application in a node22.13.x environment.
However, the following prerender error occurred.
ReferenceError: document is not defined.
What are the possible causes of this?
Or do you have any information related to this phenomenon?
drowsy bladeBOT
Hi @summer copper. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the knowledge sources provided, there are a few possible causes and related information for the "ReferenceError: document is not defined" error you're encountering when trying to build a Next.js application in a Node 22.13.x environment:
Server-side rendering issues: This error often occurs when trying to access browser-specific objects like document or window during server-side rendering. Next.js performs server-side rendering by default, and these objects are not available in the Node.js environment.
Improper use of browser APIs: You might be using browser-specific APIs in components that are being rendered on the server. This can happen if you're not properly checking for the existence of window or document before using them.
Third-party library issues: Some third-party libraries might be trying to access browser APIs during server-side rendering. This seems to be the case with the plyr-react library mentioned in one of the knowledge sources Github Issue: Plyr-react library with Next.js 14.
Incorrect import of Next.js components: The error message you're seeing is similar to another common Next.js error related to importing <Html> outside of pages/_document.js. While this isn't exactly your error, it's worth checking if you have any improper imports in your code No Document Import in Page.
To resolve this issue, you can try the following:
Ensure that any code accessing browser APIs is only run on the client-side. You can use the useEffect hook or dynamic imports to achieve this.
For third-party libraries that cause this issue, you might need to use dynamic imports with the ssr option set to false. For example:
import dynamic from 'next/dynamic'const DynamicComponentWithNoSSR = dynamic(
() => import('../components/ComponentUsingBrowserAPI'),
{ ssr: false }
)
3. Check your code for any direct imports of Next.js document-related components outside of `pages/_document.js`.
4. If the issue persists, you might want to try building your application with `NODE_ENV=production`, as one user reported this solved a similar issue [Github Issue: Error occurred prerendering page - 14.0.2+](<https://github.com/vercel/next.js/issues/58576>).
It's worth noting that Next.js 14 is the latest version mentioned in these knowledge sources, and you're using Node 22.13.x, which is a very recent version. There might be compatibility issues between this Node version and your Next.js version. Consider checking if your Next.js version is compatible with Node 22.13.x or try using a more stable Node version like 18.x or 20.x.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------@drowsy blade
I am building with the exact same code base, only changing the Node version gives me the corresponding error.
Using node@20.17.0 works fine.
Is there any information that mentions if the node version difference causes problems with the build?
drowsy bladeBOT
Let me check the knowledge base for you again. Give me one moment! :books:
Based on the knowledge sources provided, there is indeed information suggesting that the Node.js version difference can cause problems with Next.js builds, particularly with Node.js version 23 and above. Here's what I found:
Several users reported issues when upgrading to Node.js version 23:
"Also getting this in v23, downgrading to 22 fixes it"
"Same for me, using NextJS 14.2.16 and upgrading from Node v22.x.x to v23.0.0 (or even v23.1.0) results in this warning and a broken build."
Another issue specifically mentions problems with Node.js 23.2:
Github Issue: New project npx next build error states:
"23.2 breaks a few packages that use json trough webpack (date-fns) #55826"
There's also a mention of issues with Node.js 22.7.0:
Github Issue: Swc causing error in production. Related to citation-js and citeproc. notes:
"The invalid unicode point error is caused by Node.js 22.7.0, downgrading to Node.js 22.6.0 fixes that error. This is not caused by Next.js."
These sources indicate that there can indeed be compatibility issues between newer Node.js versions and Next.js. The fact that your build works fine with Node.js 20.17.0 aligns with these reports, as it's a more stable and widely-tested version.
It's worth noting that Next.js might not have full support for the latest Node.js versions immediately upon their release. It's generally recommended to use LTS (Long Term Support) versions of Node.js for production builds to ensure better stability and compatibility.