react-org-chart icon indicating copy to clipboard operation
react-org-chart copied to clipboard

Problem with next.js

Open mukhammadjon-s opened this issue 2 years ago • 1 comments

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 ?

mukhammadjon-s avatar Jul 28 '22 13:07 mukhammadjon-s

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>

lucbelliveau avatar May 31 '23 19:05 lucbelliveau