Error working with next.js

[Yifei Kong]

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

[Yifei Kong]

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

[Dmitrii Pashutskii]

@yifeikong Thanks for the workaround. I've faced the same problem when I was testing my components with jest and react-testing-library.

[Chris Zhou]

@yifeikong, I'm not familiar with how to make this library compatible for server-side rendering. Its underlying dependencies need access to DOM methods. If you have a rough idea and submit a PR, happy to look over it once I get more context.

Thanks!

[Chris Zhou]

Not sure if this is related: vercel/next.js#9890 (comment)

I'm not familiar with bundling this package, but I believe microbundle might have a problem bundling a default and named export together and that might be causing this issue. If you have a workaround for now, please use it. I apologize for the inconvenience, but if you find something that could help fix this, will appreciate any help!

[Chris Zhou]

Closing the issue, but if anyone has more suggestions to make this work with Next/Vercel, let me know through a PR!

[HT-Moh]

Hi

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?