Fullpage.js: questions about fullpage.js in nuxt

[Somanyang]

I use fullpage in my project that is built by nuxt, when I refresh the page, it occurs errors like below:

Uncaught TypeError: Cannot read property 'nextElementSibling' of undefined
Uncaught TypeError: Cannot read property 'previousElementSibling' of undefined
Uncaught TypeError: Cannot read property 'offsetTop' of undefined

I think it maybe something about ssr, but I don't know how to deal with it, can you give me some suggests ?

[alvarotrigo]

I do not know what nuxt does.
Please provide an isolated reproduction in jsfiddle or Codepen, with no CSS or JS files external to fullPage.js and the minimum amount of HTML code. Use empty sections unless strictly necessary for the reproduction.

Perhaps you might find useful to read my article regarding how to create isolated reproductions.

[Somanyang]

Nuxt.jsNuxt.js
I think it mainly caused by the frame. I think you can give detail document about how to use fullPage.js in frame of ssr.

[alvarotrigo]

how to use fullPage.js in frame of ssr.

No idea what a frame of ssr is :)

[alvarotrigo]

Perhaps if you can isolate the issue or explain how to reproduce it without nuxt.js or ssr, I could be of any help.
Just go to the core issue, what is nuxt.js doing on the page/dom/js that is causing the issue? Try to isolate your problem and make it framework abstract.

[alvarotrigo]

Let me know if you'll provide further information regarding this issue or if I should otherwise close it due to lack of info to reproduce the issue.

[Somanyang]

Thank you, I’ve solved the problem.
I think you can try fullPage.js with different JS frame to get more questions.

[alvarotrigo]

I think you can try fullPage.js with different JS frame to get more questions.

What do you mean by that?

[alvarotrigo]

Closed until an isolated reproduction is provided as detailed in the reporting issues guidelines and the issue skeleton.

[ghost]

I've been running into the same error message with nuxt, using callbacks to store the currently active section in a VueX store. The error then gets thrown when I try to modify a class via Vue based on the stored object.
Since you need server side rendering to reproduce it, I don't know how to provide a reproduction...?

[alvarotrigo]

If you work with Vue I would recommend you to check the official Vue component for fullPage.js

[ghost]

Yes, that is what I used.

And I saw https://github.com/alvarotrigo/vue-fullpage.js/issues/6

[alvarotrigo]

The this is a topic that should be treated in the vue-fullpage.js repository. Not here.
I would encourage you to check this topic: https://github.com/alvarotrigo/vue-fullpage.js/issues/73

[Progressed36]

I've got the same problem. using jQuery method. Strange thing is it works until i fire some standard jQuery. after clicking the right/left arrow its over with the error:

Uncaught TypeError: Cannot read property 'nextElementSibling' of undefined

Im using fullpage.extensions.min.js version 3.0.4

my JS:

jQuery(function( $ ) {

//initialising fullpage.js in the jQuery way
$('#fullpage').fullpage({
    licenseKey: 'removed offcourse ;)',
    //sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', '#fec401'],
    autoScrolling:true,
    scrollHorizontally: true,
    loopHorizontal: false
});

// add classes to change arrows
$('.fp-prev').addClass('fas fa-chevron-circle-left');
$('.fp-next').addClass('fas fa-chevron-circle-right');


$(".country-label").on("click", function() {

    var clicked = $(this).find("input").val();

    $("input[name=country][value=" + clicked + "]").prop("checked", true);

    $("input[name=country]").each(function() {

        if($(this).is(":checked")) {
            $(this).parents().parents().addClass("active");
        } else {
            $(this).parents().parents().removeClass("active");
        }
    });

});

});

[alvarotrigo]

@Progressed36
Please provide an isolated reproduction in jsfiddle or Codepen, with no CSS or JS files external to fullPage.js and the minimum amount of HTML code. Use empty sections unless strictly necessary for the reproduction.

Perhaps you might find useful to read my article regarding how to create isolated reproductions.

[Progressed36]

I solved it. Your using classes named "active"... as you can see in my JS i added class active to a div... by renaming my active to something else it started working again.