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:

• https://github.com/TroyAlford/react-jsx-parser/issues/170
• https://github.com/TroyAlford/react-jsx-parser/issues/215
• https://github.com/TroyAlford/react-jsx-parser/issues/100
• https://github.com/TroyAlford/react-jsx-parser/issues/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 https://github.com/TroyAlford/react-jsx-parser/pull/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