NextJS - Server Side Components errors

[officert]

Starting a new issue here. There are a few other issues posted to similar issues around server side rendering the react-jsx-parser:

• exception TypeError: Super expression must either be null or a function #170
• SyntaxError: Unexpected token when rendering image from Wordpress to Gatsby #215
• allowUnknownElements: true incompatible with SSR #100
• Since latest releases, window undefined while using the library with SSR  #59

The initial error I got is:

TypeError: Super expression must either be null or a function

when trying to use this component with NextJS 14 and server side rendering it. Just importing react-jsx-parser causes this issue.

I've cloned the repo and add it direct to my mono repo so I can use the raw source code directly. I'm now getting this error:

⨯ Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

I'll update this thread as I find more info and will working on fixing. If I can find a fix, I'll post a PR. Thanks @TroyAlford for an awesome library!

[officert]

I was able to get this error fixed and now I can use react-jsx-parser server side with NextJS.
It requires pulling the parser out of JsxParser.tsx so we can use it from a React function component:

export default class JsxParser {
 //...convert the React Component into a plain JS class
}

and then I added a new function component:

import JsxParser, { TProps } from './JsxParser'

let parser: JsxParser

export default function JsxParserFn(props: TProps) {
  parser = parser || new JsxParser(props)

  return parser.render(props.jsx ?? '')
}

@TroyAlford Let me know if this is something you'd like fixed in this repo, I could try and patch it up and submit a pr. We'd have to extract all the parser stuff into a JS class and then add wrappers for function components and the old class style component.

[TroyAlford]

Sure, that's a great solution :-) as long as the functional component contains no hooks of any kind, I'm totally for it!

[jseparovic]

@officert Do you have a working PR?

[gip]

Tried with next 14.1.3 and "react-jsx-parser": "github:EliteByte/react-jsx-parser#develop" but still running into the same webpack issue.

Edit: my bad, I thought the #256 PR was supposed to fix the issue but it's something else.

[TroyAlford]

Unfortunately, I don't use next for anything. If someone wants to put up a PR to support, I'm open to it.

[gip]

Unfortunately, I don't use next for anything. If someone wants to put up a PR to support, I'm open to it.

Thanks. I spent some time looking at the issue today. Basically, the package will work in a client component, with caveats: layout is ok but the callbacks / handlers won't work. Fixing that would be hard given the complexity of how Next manages callbacks across the server / client component boundary.

[ShahriarKh]

Seems like the library should be refactored because classes can't be passed from server components to client components: https://react.dev/reference/react/use-client#serializable-types

[TroyAlford]

@ShahriarKh, I believe that comment indicates that you cannot serialize a class if it is passed as a prop, not that class components are incompatible with server-side rendering. AFAIK, server-side components shouldn't care which kind of component you use as long as it correctly renders JSX output within the react lifecycle.

The new 'use server' directive may have some incompatibility that I need to be made aware of, but I don't see why it should matter much. I do SSR with this component in the main project I created it for, and there should be no reason why you'd need any form of callback.

This lib takes a JSX string and renders it as a react component. It does not handle or deal with much by way of lifecycle, event handlers, etc., so I wonder why there would be a client/server callback issue. I need a clear example of what's not working + a repro to have an action I can meaningfully take here.

Unfortunately, as stated above, I don't use next.js at all :\ I get that many people do — and I used to use it extensively, too — but this kind of "I'm not compatible with basic React stuff" set of problems caused me to move away from it entirely. :(

I'm going to leave this ticket open marked as "Help Wanted" for now, and hope someone from the community who has a relevant use-case can dig in.