[Question}: FPjs & nextjs & prismic dynamic content after page renderd

[bergnerjens]

Hi, I am using fullpage js with next 13 and prismic CMS (https://prismic.io/). All works fine when nextjs renders the page on server and links between sides are used with "normal" a href. But when using PrismicLink or NextLink and the side will be renderd on client side, I have a timing issue with the fullpage wrapper component. It looks like page wrapper will render the page and looks for the first section class but from prismic the section is not loaded in same time so fullpage gives an unkown index error.

If I add a div with className="section" in the fullpage wrapper before the first prismic component all works fine, but I have a useless div before content. Question: Is there a way to add a "hidden" section div in fullpage?

Something like:

<ReactFullpage
...props
render={({ fullpageApi }) => (
          <ReactFullpage.Wrapper>

{/* here I need a hidden fullpage section */}
<div className="section">nothing to see, should be hidden </div>

        <MyPrismicComponent>
{/* renders not in the same time as fullpage, so I got an error */}
        </MyPrismicComponent>

          </ReactFullpage.Wrapper>

        )}
      />

Would be great if you have any ideas for this problem.

[alvarotrigo]

Is this the error you are getting?

If that's the case, it happens because fullPage.js expects sections inside. Here's a reproduction: https://codepen.io/alvarotrigo/pen/jOeXaop

Try setting display:none for that section using CSS.

For example:

#section-1{
   display:none;
}

If you ignore the error, does fullpage.js still work for you just fine after the MyPrismicComponents loads?

I assume you are using fullPage.js v4? (react-fullpage 0.1.39?)

[bergnerjens]

Hi Alvaro,

no it does not work.

ends up in:

llPage: Fullpage.js can only be initialized once and you are doing it multiple times! window.console.error @ next-dev.js:20 overrideMethod @ react_devtools_backend_compact.js:2367 f @ react-fullpage.js:238 vr @ react-fullpage.js:238 gr @ react-fullpage.js:238 init @ react-fullpage.js:91 componentDidMount @ react-fullpage.js:90 invokeLayoutEffectMountInDEV @ react-dom.development.js:25133 invokeEffectsInDev @ react-dom.development.js:27351 commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27327 flushPassiveEffectsImpl @ react-dom.development.js:27056 flushPassiveEffects @ react-dom.development.js:26984 performSyncWorkOnRoot @ react-dom.development.js:26076 flushSyncCallbacks @ react-dom.development.js:12042 commitRootImpl @ react-dom.development.js:26959 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25981 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-dom.development.js:22839 Uncaught TypeError: Cannot read properties of null (reading 'item')     at je (react-fullpage.js:238:22981)     at webpack_modules.933.s.destroy (react-fullpage.js:238:61635)     at ReactFullpage.destroy (react-fullpage.js:92:234)     at ReactFullpage.componentWillUnmount (react-fullpage.js:91:172)     at callComponentWillUnmountWithTimer (react-dom.development.js:22852:1)     at safelyCallComponentWillUnmount (react-dom.development.js:22873:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24129:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24018:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)     at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)     at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)     at commitDeletionEffects (react-dom.development.js:23976:1)     at recursivelyTraverseMutationEffects (react-dom.development.js:24259:1)     at commitMutationEffectsOnFiber (react-dom.development.js:24332:1)     at recursivelyTraverseMutationEffects (react-dom.development.js:24273:1)     at commitMutationEffectsOnFiber (react-dom.development.js:24293:1)     at recursivelyTraverseMutationEffects (react-dom.development.js:24273:1)     at commitMutationEffectsOnFiber (react-dom.development.js:24332:1) je @ react-fullpage.js:238 webpack_modules.933.s.destroy @ react-fullpage.js:238 destroy @ react-fullpage.js:92 componentWillUnmount @ react-fullpage.js:91 callComponentWillUnmountWithTimer @ react-dom.development.js:22852 safelyCallComponentWillUnmount @ react-dom.development.js:22873 commitDeletionEffectsOnFiber @ react-dom.development.js:24129 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24018 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24118 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 recursivelyTraverseDeletionEffects @ react-dom.development.js:23989 commitDeletionEffectsOnFiber @ react-dom.development.js:24170 commitDeletionEffects @ react-dom.development.js:23976 recursivelyTraverseMutationEffects @ react-dom.development.js:24259 commitMutationEffectsOnFiber @ react-dom.development.js:24332 recursivelyTraverseMutationEffects @ react-dom.development.js:24273 commitMutationEffectsOnFiber @ react-dom.development.js:24293 recursivelyTraverseMutationEffects @ react-dom.development.js:24273 commitMutationEffectsOnFiber @ react-dom.development.js:24332 recursivelyTraverseMutationEffects @ react-dom.development.js:24273 commitMutationEffectsOnFiber @ react-dom.development.js:24293 recursivelyTraverseMutationEffects @ react-dom.development.js:24273 commitMutationEffectsOnFiber @ react-dom.development.js:24576 recursivelyTraverseMutationEffects @ react-dom.development.js:24273 commitMutationEffectsOnFiber @ react-dom.development.js:24293 recursivelyTraverseMutationEffects @ react-dom.development.js:24273 commitMutationEffectsOnFiber @ react-dom.development.js:24432 commitMutationEffects @ react-dom.development.js:24243 commitRootImpl @ react-dom.development.js:26810 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 commitRootImpl @ react-dom.development.js:26959 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25981 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 next-dev.js:20 The above error occurred in the component:

    at ReactFullpage @./react-fullpage/dist/react-fullpage.js:90:417)     at main     at Layout (webpack-internal:///./components/Layout.js:9:11)     at PageWrapper (webpack-internal:///./components/PageWrapper.js:28:11)     at LazyImpl (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:121:9)     at Page (webpack-internal:///./pages/[uid].js:36:11)     at PrismicPreview @./next/dist/PrismicPreview.js:15:27)     at PrismicProvider @./react/dist/PrismicProvider.js:13:28)     at BreakpointProvider (webpack-internal:///./node_modules/react-use-breakpoint/dist/index.js:125:31)     at App (webpack-internal:///./pages/_app.js:80:11)     at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)     at ErrorBoundary @./react-dev-overlay/dist/client.js:2:3325)     at ReactDevOverlay @.***/react-dev-overlay/dist/client.js:2:6707)     at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)     at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:198:11)     at Root (webpack-internal:///./node_modules/next/dist/client/index.js:371:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. window.console.error @ next-dev.js:20 overrideMethod @ react_devtools_backend_compact.js:2367 logCapturedError @ react-dom.development.js:18687 callback @ react-dom.development.js:18755 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23364 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 commitRootImpl @ react-dom.development.js:26959 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25981 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 next-dev.js:20 The above error occurred in the component:

    at ReactFullpage @./react-fullpage/dist/react-fullpage.js:90:417)     at main     at Layout (webpack-internal:///./components/Layout.js:9:11)     at PageWrapper (webpack-internal:///./components/PageWrapper.js:28:11)     at LazyImpl (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:121:9)     at Page (webpack-internal:///./pages/[uid].js:36:11)     at PrismicPreview @./next/dist/PrismicPreview.js:15:27)     at PrismicProvider @./react/dist/PrismicProvider.js:13:28)     at BreakpointProvider (webpack-internal:///./node_modules/react-use-breakpoint/dist/index.js:125:31)     at App (webpack-internal:///./pages/_app.js:80:11)     at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)     at ErrorBoundary @./react-dev-overlay/dist/client.js:2:3325)     at ReactDevOverlay @.***/react-dev-overlay/dist/client.js:2:6707)     at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)     at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:198:11)     at Root (webpack-internal:///./node_modules/next/dist/client/index.js:371:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. window.console.error @ next-dev.js:20 overrideMethod @ react_devtools_backend_compact.js:2367 logCapturedError @ react-dom.development.js:18687 callback @ react-dom.development.js:18755 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23364 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 commitRootImpl @ react-dom.development.js:26959 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25981 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 next-dev.js:20 The above error occurred in the component:

    at ReactFullpage @./react-fullpage/dist/react-fullpage.js:90:417)     at main     at Layout (webpack-internal:///./components/Layout.js:9:11)     at PageWrapper (webpack-internal:///./components/PageWrapper.js:28:11)     at LazyImpl (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:121:9)     at Page (webpack-internal:///./pages/[uid].js:36:11)     at PrismicPreview @./next/dist/PrismicPreview.js:15:27)     at PrismicProvider @./react/dist/PrismicProvider.js:13:28)     at BreakpointProvider (webpack-internal:///./node_modules/react-use-breakpoint/dist/index.js:125:31)     at App (webpack-internal:///./pages/_app.js:80:11)     at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)     at ErrorBoundary @./react-dev-overlay/dist/client.js:2:3325)     at ReactDevOverlay @.***/react-dev-overlay/dist/client.js:2:6707)     at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)     at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:198:11)     at Root (webpack-internal:///./node_modules/next/dist/client/index.js:371:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. window.console.error @ next-dev.js:20 overrideMethod @ react_devtools_backend_compact.js:2367 logCapturedError @ react-dom.development.js:18687 callback @ react-dom.development.js:18755 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23364 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 commitRootImpl @ react-dom.development.js:26959 commitRoot @ react-dom.development.js:26682 finishConcurrentRender @ react-dom.development.js:25981 performConcurrentWorkOnRoot @ react-dom.development.js:25809 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 react-fullpage.js:238 Uncaught TypeError: Cannot read properties of null (reading 'index')     at Pe (react-fullpage.js:238:24475)     at MutationObserver.yi (react-fullpage.js:238:36358)

Page Wrapper Component is implemented like this:

If I place my prismic components instead of {children} like

PRISMIC STUFF

it works, but prismic components can be more than one, so its not helpfull to have the section div outside the prismic Slice. Prismic Slice looks like: I tried something like to hide the first section with useEffect when slice section is visible. It works on cliend side, but its not an solution on server side and I tried it only for one prismic slice but its not feasible if I want to use more than one. >I assume you are using fullPage.js v4? (react-fullpage 0.1.39?) yes ***@***.***/react-fullpage": "^0.1.39", Best Jens Am 22.05.23 um 12:49 schrieb Álvaro: > > Is this the error you are getting? > image > > > If that's the case, it happens because fullPage.js expects sections > inside. Here's a reproduction: > https://codepen.io/alvarotrigo/pen/jOeXaop > > Try setting |display:none| for that section using CSS. > > For example: > > #section-1{ > display:none; > } > > If you ignore the error, does fullpage.js still work for you just fine > after the MyPrismicComponents loads? > > I assume you are using fullPage.js v4? (react-fullpage 0.1.39?) > > — > Reply to this email directly, view it on GitHub > , > or unsubscribe > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> > --

[alvarotrigo]

That means you are somehow initializing fullPage.js multiple times. Try to figure out why.

[bergnerjens]

Dont get this error if I put a <div className="section"> class before prismic slide.

===> works, no muliple fullpage or any other message:

    <PageWrapper page={page} anchors={anchors} languages={languages} mainMenuItems={mainmenu}>
      <div className="section"> I dont want this section</div>
       <SliceZone slices={page.data.slices} components={components} 
        />

    </PageWrapper>

===> error

    <PageWrapper page={page} anchors={anchors} languages={languages} mainMenuItems={mainmenu}>
       <SliceZone slices={page.data.slices} components={components} 
        />

    </PageWrapper>

Slice zones start like:

const ServicesIntro = ({ slice }) => {

  return (
    <>
      <div
        data-aos="fade-in"
        data-aos-duration={3000}
        className="section"
        data-anchor={slice.primary?.sectionanchor}
      >

[alvarotrigo]

I'd have to investigate this with more time.

But some hacky workaround is to just remove the section once your inner component is loaded.