Comments (4)
Hey @ryscheng,
The error you're encountering appears to be related to a specific issue with static site generation (SSG) in Next.js. The error message mentions the use of searchParams.toJSON on a page with dynamic = "error", which seems to be causing the issue with static rendering.
Here are a few steps you can take to troubleshoot and potentially resolve the issue:
- Check Dynamic Imports - The error seems to be mentioning a dynamic import with a value of "error". Make sure you review your dynamic imports and ensure they are set up correctly. If you are using dynamic imports, double-check that the imported components are SSG-compatible.
- Review Code for toJSON Usage: Look through your code to find where searchParams.toJSON is being used. It's possible that this usage might be conflicting with the SSG process. If this usage isn't essential for SSG, consider removing or refactoring it to avoid the error.
- Check Dependencies and Compatibility
- Check Next.js Documentation: The error message references a specific URL for more information: https://nextjs.org/docs/messages/prerender-error
Hope it helps!
Let's Connect!!
from plasmic.
Thanks for getting back to me. Sending steps to reproduce:
- Create a brand new Plasmic project. Publish it
- Create a brand new Next.js application via
npx create-plasmic-app
. Make sure to select the app router, not the pages router. - Add
output: 'export',
to your next.config.js.
This is the error you get
StaticGenBailoutError: Page with `dynamic = "error"` couldn't be rendered statically because it used `searchParams.toJSON`.
at staticGenerationBailout (/home/ryscheng/Downloads/my-app/.next/server/chunks/587.js:156:15)
at Object.get (/home/ryscheng/Downloads/my-app/.next/server/chunks/208.js:12946:70)
at stringify (<anonymous>)
at pb (/home/ryscheng/Downloads/my-app/.next/server/chunks/208.js:14337:9)
at mb (/home/ryscheng/Downloads/my-app/.next/server/chunks/208.js:14236:29)
at Timeout._onTimeout (/home/ryscheng/Downloads/my-app/.next/server/chunks/208.js:14061:16)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7) {
code: 'NEXT_STATIC_GEN_BAILOUT'
}
I think this is a bug with Plasmic, because I am able to reproduce this with brand new projects with no code changes.
from plasmic.
Hey @ryscheng, nice seeing you!
The reason this is happening is because the generated catchall page uses searchParams
, a dynamic function which only works with dynamic rendering. To use it with output: 'static'
, you'll need to remove references to searchParams
. If your Plasmic page relies on search params, you would need to create a new client component and call useSearchParams
to get search params on the client, then pass it into PlasmicComponent
. Note SSR would not be possible in this case.
from plasmic.
Ah of course! Thanks for the response @jaslong
from plasmic.
Related Issues (20)
- Reduce bundle size of @plasmicpkgs/react-slick HOT 2
- Surpport drag/drop custom Vue or Nuxt components? HOT 2
- If Plasmic Is Open Source, Why the Need to Provide API Token? HOT 1
- plasmic internal server error HOT 4
- Installation of the Plasmic Studio platform HOT 5
- Inquire About Plasmic's Bug Bounty Program HOT 1
- Can someone please explain how the Plasmic App plugin system work internally?
- Installing Plasmic Studio locally HOT 3
- Unable to load any project page
- feat: hosting Studio itself HOT 2
- Plasmic Studio: [MobX] trace() is not available in production HOT 1
- [Feature Request] Dark mode
- Plans for docker support? HOT 1
- How do you manage exports? HOT 1
- Cannot read properties of null (reading 'getValue') HOT 4
- Site not loading at all. HOT 1
- [vue.js] user and userAuthToken are not declared
- Support Next.js edge runtime HOT 1
- Plasmic Studio not working anymore HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plasmic.