Error working with next.js
See original GitHub issueServer Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Stack trace:
Check your code at index.js:24.
in SimpleWordcloud (at _app.js:6)
in MyApp
in Unknown
in Context.Provider
in Context.Provider
in Context.Provider
in Context.Provider
in AppContainer
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
at ReactDOMServerRenderer.render (/Users/yifei/repos/wc-next/node_modules/react-dom/cjs/react-dom-server.node.development.js:3743:17)
at ReactDOMServerRenderer.read (/Users/yifei/repos/wc-next/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
at renderToString (/Users/yifei/repos/wc-next/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
Minimal reproducible repo: https://github.com/yifeikong/wc-next-bug
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Advanced Features: Error Handling - Next.js
React Error Boundaries is a graceful way to handle a JavaScript error on the client so that the other parts of the application...
Read more >Testing and error handling patterns in Next.js - LogRocket Blog
Check out these different ways to run tests and handle errors in Next.js apps using Cypress, a JavaScript-based testing framework.
Read more >5 Most Commonly error face is Next.js? | Nextjs - Medium
This error occurs due to the unclosing tag. in reactjs, everything is based on the open and closing tag. When do not close...
Read more >Create a custom error component in Next.js (SSR & CSR)
Create a custom error component in Next.js (SSR & CSR) · First, create a fresh Next.js project by running npx create-next-app@latest custom-error ......
Read more >Next.js API - Global Error Handler Example & Tutorial
The global error handler is used catch all errors and remove the need for duplicated error handling code throughout the Next.js tutorial api....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It seems that the cause is Next.js is doing Server Side Rendering and React-WordCloud can only be rendered on the client side, a quick fix would be:
If it’s a viable solution, maybe you can make React-WordCloud server-side-renderable, and that would be great.
more one client-only rendering in next.js
Hi
I have the same issue and I appylied the solution from @yifeikong it worked however the console shows the following warning :
Any idea how to fix it?