Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
bergnerjens opened this issue May 22, 2023 · 5 comments
Open

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

bergnerjens opened this issue May 22, 2023 · 5 comments
Labels
reproduction required

Comments

@bergnerjens
Copy link

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
Copy link
Owner

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?)

@bergnerjens
Copy link
Author

bergnerjens commented May 22, 2023 via email •
edited

@alvarotrigo
Copy link
Owner

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

@bergnerjens
Copy link
Author

bergnerjens commented May 22, 2023 •
edited

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
reproduction required
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alvarotrigo @bergnerjens