FlexLayout
FlexLayout copied to clipboard
NextJS Server component not supported due to ErrorBoundary being a class component
Describe the bug
When using Layout in a server component, I get a NextJS error:
Server Error
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
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
(rsc)/node_modules/flexlayout-react/lib/view/ErrorBoundary.js (7:0)
(rsc)/./node_modules/flexlayout-react/lib/view/ErrorBoundary.js
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
-
npx create-next-app@latest -
npm install flexlayout-react - Use the following code in
app/page.tsx -
npm run dev
Code:
import { Layout, Model } from 'flexlayout-react';
var json = {
global: {},
borders: [],
layout: {
type: "row",
weight: 100,
children: [
{
type: "tabset",
weight: 50,
children: [
{
type: "tab",
name: "One",
component: "button",
}
]
},
{
type: "tabset",
weight: 50,
children: [
{
type: "tab",
name: "Two",
component: "button",
}
]
}
]
}
};
const model = Model.fromJson(json);
const factory = (node) => {
var component = node.getComponent();
if (component === "button") {
return <button>{node.getName()}</button>;
}
}
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<Layout
model={model}
factory={factory} />
</main>
);
}
Expected behavior
It does not crash
Operating System
- Any
Browser Type?
- Any
Browser Version
- Any
Screenshots or Videos
Additional context
No response
slap 'use client' on top of the file