search

unicef / react-org-chart

Component for displaying an org chart for a large organization. Supports lazy load and export.
https://unicef.github.io/react-org-chart/
249 stars 124 forks source link

Problem with next.js #28

Open mukhammadjon-s opened 2 years ago

mukhammadjon-s commented 2 years ago

I am using this package in my next.js project but got this issue. I have copied all code from examples folder but still issue `Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'append')

Call Stack init node_modules\@unicef\react-org-chart\dist\index.js (19:3197) e.value node_modules\@unicef\react-org-chart\dist\index.js (37:1738) commitLifeCycles node_modules\react-dom\cjs\react-dom.development.js (20663:0) commitLayoutEffects node_modules\react-dom\cjs\react-dom.development.js (23426:0) HTMLUnknownElement.callCallback node_modules\react-dom\cjs\react-dom.development.js (3945:0) HTMLUnknownElement.sentryWrapped`

How can I fix it ? It is not compatible with Next.js ?

lucbelliveau commented 1 year ago

Just ran into this - it is looking for a dom element with an id of root. Quick fix is to add a <div id="root"> line to your _app.tsx file like this:

<Layout>
  {/* required by react-org-chart */}
  <div id="root">
    <Component {...pageProps} />
  </div>
</Layout>