React rendering issue with large components

[MatteoGauthier]

Hey @PejmanNik ! I really like this project and I wanted to create multiple pages from a big components. Here is a reproduction of the issue : https://codesandbox.io/s/jikji-reproduction-error-big-components-g9qvjc

The client side issue on

Uncaught Error: The split result component is empty.
    at Xe (index.esm.js:1:23725)
    at Fo (index.esm.js:1:24376)
    at index.esm.js:2:4060
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
    at flushPassiveEffects (react-dom.development.js:26984:14)
Xe @ index.esm.js:1
Fo @ index.esm.js:1
(anonymous) @ index.esm.js:2
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
react-dom.development.js:18687 The above error occurred in the <gn> component:

    at gn (http://localhost:5173/@fs/Users/matteogauthier/dev/PeopleProjects/jikji/packages/react/lib/index.esm.js:2:3757)
    at div
    at Cn (http://localhost:5173/@fs/Users/matteogauthier/dev/PeopleProjects/jikji/packages/react/lib/index.esm.js:2:4372)
    at AnnualReport (http://localhost:5173/src/AnnualReport/index.tsx?t=1696838907743:27:3)
    at cr (http://localhost:5173/@fs/Users/matteogauthier/dev/PeopleProjects/jikji/packages/react/lib/index.esm.js:9:7684)
    at RecoilRoot_INTERNAL (http://localhost:5173/node_modules/.vite/deps/recoil.js?v=e2cbaca4:2723:3)
    at RecoilRoot (http://localhost:5173/node_modules/.vite/deps/recoil.js?v=e2cbaca4:2840:5)
    at mr (http://localhost:5173/@fs/Users/matteogauthier/dev/PeopleProjects/jikji/packages/react/lib/index.esm.js:9:7265)
    at div
    at Ht (http://localhost:5173/@fs/Users/matteogauthier/dev/PeopleProjects/jikji/packages/react/lib/index.esm.js:1:1123)
    at QueryClientProvider2 (http://localhost:5173/node_modules/.vite/deps/react-query.js?v=e2cbaca4:2667:21)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
react-dom.development.js:12056 Uncaught Error: The split result component is empty.
    at Xe (index.esm.js:1:23725)
    at Fo (index.esm.js:1:24376)
    at index.esm.js:2:4060
    at commitHookEffectListMount (react-dom.development.js:23150:26)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:13)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:9)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)
    at commitPassiveMountEffects (react-dom.development.js:24866:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:3)
    at flushPassiveEffects (react-dom.development.js:26984:14)
Xe @ index.esm.js:1
Fo @ index.esm.js:1
(anonymous) @ index.esm.js:2
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651

Thanks for your help ! Have a nice day