Failed to execute 'observe' on redirect in gatsby

[kamilsnopkowski]

Description

Hi, I am a contributor in project made on gatsby-starter-default setup and I'm experiencing an issue while redirecting through the site. The idea is to have single page using fullPage and after i redirect (using gatsby-router) to another one I get an error: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

I believe it is caused because other pages do not have any DOM structure related to the fullPage plugin, therefore I've tried to do sort of cleanup like this:

useLayoutEffect(() => {
  if (pageId === 'fullpage_id') {
    window.fullpage_api.reBuild();
  } else {
    window.fullpage_api.destroy('all');
  }
}

But the problem still occurs.

Versions

@fullpage/react-fullpage: 0.1.24

[alvarotrigo]

Can you provide an isolated reproduction in Codesandbox 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.

[kamilsnopkowski]

First of all thanks for quick reply

For now I wasn't really able to reproduce the issue but in meantime I found something that could be a usefull information. I've noticed that destroy('all') method doesn't really undo the changes in the html and since Links in gatsby-router do not refresh the page, some classes/styles preserve, Here I drop screens of not fullPage related page before and after visiting the one with the plugin:

Before

After

Forcing site to reload with window.location.reload() kinda works but it's slow so the error has time to show up and well it kills the idea behind routing in react/gatsby

[alvarotrigo]

Thanks for that! 👍 So the main issue here is that the inline styles don't get removed in:

• body

• parents of fullpage.js containers

• As well as the "fp-scrollable" class on the body

Right?

[kamilsnopkowski]

Yes but I'm not 100% sure if that's the actuall reason and removing those will fix the error. In quite similiar issue I've found you were suggesting to remove classes manually so I will try that approach

[kamilsnopkowski]

Removing styles and classes on their own did not work for me, but I've noticed that on your example here class fp-scrollable does not get removed on calling destroy, It's being added. Is that the expected behaviour?

https://user-images.githubusercontent.com/83779239/168540478-29ed0af4-e753-413e-9021-8a9435cab869.mp4

[alvarotrigo]

Those classes should be removed, so that's for sure a bug. However, that is very probably not the issue of the problem.

The problem is probably caused by trying to initialize fullPage.js before the fullPage.js structure is ready (or when it's nonexistent).

You can reproduce the issue on the small fiddle I've created: https://jsfiddle.net/2jsqpd01/

I guess an easy solution for this is checking for the element we want to observe before observing it. I'll come back soon with a link to a file you can use to test this fix.

[alvarotrigo]

Can you try replacing your dist files for the ones in the dev branch? https://github.com/alvarotrigo/react-fullpage/tree/dev/dist

Or if you prefer, you can replace them using npm by installing the dev branch:

npm install "https://github.com/alvarotrigo/react-fullpage.git#dev" --save

Let me know if this fixes your problem.

[kamilsnopkowski]

Thanks for explaning the error!

Well i've replaced files via npm but sadly it did not fix the problem.

[alvarotrigo]

Try providing an isolated reproduction so I can play with the code and inspect the error. Without a reproduction, it will be difficult to track.

[alvarotrigo]

Is the error in the fullPage.js code btw? Can you paste here the line?

[kamilsnopkowski]

Yes error comes from fullPage files:

I will try to provide reproduction later today.

[alvarotrigo]

If you beautify the code on Chrome we can see the exact line where it happens.

[kamilsnopkowski]

Here you go:

Qn().observer && xe && xe.observe(v(dn)[0], ke)

[alvarotrigo]

It doesnt look like you are using the dev files. But I’ll verify when i get home

[kamilsnopkowski]

Oh yes sorry my bad, here with the dev files: Qn().observer && xe && xe.observe(v(dn)[0], ke)

[alvarotrigo]

Thansk. I've made another commit on the dev branch. Can you update your files again? Uninstall and install to make sure you get the latest. You should see a fullPage 4.0.8-test2 on the source code.

[kamilsnopkowski]

Yeah I will let you know as soon as I come home

[kamilsnopkowski]

Updated files fixed the error! Yesterday faced some npm problems so had to try today and everything worked like a charm, thanks!

[alvarotrigo]

Awesome to hear!

[alvarotrigo]

Fixed in 0.1.25! 🎉