Enabling partial prerendering breaks the Select component in NextUI
https://nextui.org/docs/components/select
The drop down menu doesn't open
#Partial prerendering breaks element
meager kindle
golden prawnBOT
Hi @meager kindle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
I'm sorry to hear that you're experiencing issues with the Select component from NextUI when enabling partial prerendering in Next.js. However, based on the knowledge sources provided, there's no specific information about this issue.
Partial Prerendering is an experimental feature in Next.js 14 that allows the static portions of a page to be pre-generated and served from the cache, while the dynamic portions are streamed in a single HTTP request (source (https://vercel.com/docs/frameworks/nextjs)). It's important to note that this feature is currently not recommended for production environments due to its experimental nature (source (https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering)).
There are known issues with partial prerendering, such as issues with Framer Motion animations (source (https://github.com/vercel/next.js/issues/63785)) and issues with updating search parameters (source (https://github.com/vercel/next.js/issues/53543)). However, there's no mention of issues specifically related to the Select component from NextUI.
I recommend creating an issue on the Next.js GitHub repository detailing the problem you're experiencing, including any error messages and the relevant code. This will help the Next.js team identify and potentially fix the issue.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
meager kindle
@golden prawn what about these errors?
web:build: Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
web:build:
web:build: Error: <Html> should not be imported outside of pages/_document.
web:build: Read more: https://nextjs.org/docs/messages/no-document-import-in-page
web:build: at Y (project/node_modules/.pnpm/next@14.3.0-canary.36_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:5430)
web:build: at I (project/apps/web/.next/server/chunks/442.js:6:1263)
web:build: at renderWithHooks (project/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
web:build: at renderIndeterminateComponent (project/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
web:build: at renderElement (project/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
web:build: at renderNodeDestructiveImpl (project/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
web:build: at renderNodeDestructive (project/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
golden prawnBOT
Let me check the knowledge base for you. One moment! :books:
The error message you're seeing is indicating that the <Html> component is being imported outside of the _document page. In Next.js, the <Html> component should only be used within a custom Document.
The Document is used to augment your application's <html> and <body> tags, and it's only rendered on the server side. This means you can't use it in conjunction with client-side rendering techniques like useState, useEffect and any other React hooks.
Here's what you can do to fix this issue:
-
Remove any import statements for
<Html>that exist outside of your_documentfile. -
If you need to customize your application's
<html>or<body>tags, create a customDocument. Here's an example:
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
In this example, MyDocument is a custom Document. The render method returns the <Html> component, which is where you can add your modifications.
For more information, you can refer to the Next.js documentation on custom Document (https://nextjs.org/docs/advanced-features/custom-document).
Remember, the <Html> component should not be used in any other part of your application. If you're trying to add elements to your page, consider using the <Head> component for elements like meta tags, or adding elements directly to your components or pages.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
meager kindle
@golden prawn I don't have a 404 page, this error goes away on disabling ppr
golden prawnBOT
Let me check the knowledge base for you. One moment! :books:
The error you're encountering seems to be related to the experimental feature of Partial Prerendering (PPR) in Next.js. As per the Next.js documentation (https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering) and Vercel's documentation (https://vercel.com/docs/frameworks/nextjs), PPR is currently not recommended for production environments due to its experimental nature.
If disabling PPR resolves the error, it suggests that the issue might be related to how PPR handles the prerendering of pages. It's possible that PPR is trying to prerender a 404 page that doesn't exist in your application, hence the error.
If you don't need the functionality provided by PPR, you might want to keep it disabled until it's out of the experimental stage. If you do need PPR, consider adding a custom 404 page to your application as described in the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/routing/custom-error#404-page). This might prevent the error from occurring.