Server-side rendering not working with Next.js

[Titou325]

Server-side rendering not working with Next.js

[ckifer]

Appreciate the investigation! Why would Next just make Class components break? 😅 Wild.

Anyways, we're doing a lot of refactoring that should enable us to move off of class components entirely - it'll just take a while.

Thanks!

[Titou325]

Hi @ckifer, thank you very much for your prompt answer. I am a bit puzzled because charts do work in server-side rendering in a Node.JS backend project. However they specifically don't in a Next.JS environment. In the above example, the same chart with the same components is server-side renderable using the test.ts script, but is not within Next.

It seems that there may be a component that detects a different runtime and triggers different rendering processes. Most notably, on our example that works server-side the generated code doesn't contain anything for tooltips but it seems that inside a Next project the Chart attempts to render tooltips hence causing the error.

Is there a way we could bypass the tooltips altogether? We have tried adding a <Tooltip content={() => null} viewBox={{x: 0, y:0, width: 0, height: 0}} /> to try and opt-out of tooltips rendering but it doesn't seem to work.

Thanks for the input anyways, much appreciated!

[Titou325]

After a bit of investigating, it seems that the root cause is lack of support for Class Components for server-side rendering in Next.js. Although class components are now legacy, I think this would require a significant rewrite effort for Recharts.

Let's close this for now.

[ckifer]

Recharts has no explicit support for server side rendering. It's built for the browser environment only at this point in time as we call functions such as getClientBoundingRect and others that do not exist on the server.
"use client"; is the solution. You can separate your components so that only your charts have to render client side

[ckifer]

the es6 path is probably being forced because I think Next uses the type: module field in the package.json (not sure about that 100%). This with the combination of some magic they are doing could cause the issue I guess?

I wonder, in that Node backend project if you tried to use type: module if you would get the same error or not

[Titou325]

Both projects are actually in the same folder, the node entrypoint is at https://github.com/Titou325/dev-recharts-next/blob/main/test.ts, inside the Next app. The Next app also imports the file at https://github.com/Titou325/dev-recharts-next/blob/main/src/app/page.tsx

The two commands are npm run dev for Next and npx tsx test.ts for the Node backend.

I will try and see if tsx may do some shenanigans to get things working but it seems strange.

[ckifer]

definitely strange.

the component in question in the error is here https://github.com/recharts/recharts/blob/master/src/component/TooltipBoundingBox.tsx#L29. Its still a class component and it doesn't have a constructor or call super

If I do call the constructor though, its useless and I shouldn't have to in order to prevent errors