Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error working with next.js

See original GitHub issue

Server 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 GitHub Comments

5reactions

yifeikongcommented, Sep 15, 2020

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:

{ process.browser && <ReactWordCloud words={props.words} options={props.wordCloudOptions} /> }

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

0reactions

HT-Mohcommented, Mar 9, 2021

I have the same issue and I appylied the solution from @yifeikong it worked however the console shows the following warning :

  at div
   at G (webpack-internal:///./node_modules/react-wordcloud/dist/index.module.js:22:9176)
   at div
   at CyptozoneCloudWords (webpack-internal:///./components/blog/CyptozoneCloudWords.tsx:16:25)
   at div
   at div
   at div
   at main
   at div
....

Any idea how to fix it?

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...

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.

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...

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 ......

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....