Getting Error n.stateNode.parentNode is null TypeError only in Firefox Browser

[kpegt]

Hi All,

I'm encountering a n.stateNode.parentNode is null TypeError in production after deployment. Running/serving the production build locally on my machine works fine in Firefox without any errors, and it also works fine with other browsers. The root page loads without any issues, but when we try to navigate to other pages using Next.js Link, this error occurs, displaying: "Application error: a client-side exception has occurred (see the browser console for more information)." However, if we reload the page, it loads as expected.

Additionally, I'm getting another error when using the GlobalError reset() method. This error is: t.parallelRoutes is null.

Below are the versions of Next.js, React, and React DOM we are using:

"next": "^14.2.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"

This is a contentful driven website built with next js App router Architecture. We are having a cache all slug in the root directory , so except the root/landing page / , all other slugs are handled in cache all route.

Here are more details regarding the error. I have replaced the original URL with a dummy one: All of the screenshots are from dev environment.

1. this is the landing page and its works fine
   

2. clicking on the any links or redirection happens, it is throwing the following error
   

3. And if I click on the try again (GlobalError reset() method), it throwing another error
   

In other browsers, including Edge, it is working seamlessly without any issues.

Thanks in advance :)

[icyJoseph]

Could it be because of a browser extension in your FF? Have you tried incognito mode?

[kpegt]

@icyJoseph not sure its a code issue. I replaced next/link with Material-UI's Link component or a simple anchor tag, and it's working fine. However, this approach will lead to less efficient navigation.

[icyJoseph]

Yeh, that unloading the page and navigating away like that, defeats the purpose of SPA.

Can you try to make a small reproduction repository, go to next.new on your browser, do as little as possible to reproduce and post back the link to it.

[kpegt]

sure @icyJoseph

[kpegt]

@icyJoseph here is the repo https://github.com/kpegt/nextjs-5qx3fa

We were using the Olark chat service in our project, which is currently injected through GTM. In this test project, I have added the corresponding script in layout.tsx using an Olark test account.

I opened this stackblitz project in firefox and im getting the same error

[icyJoseph]

🤔 I gave this a go, and yeah, upon route change, having called olark.identify will trigger this issue.

My guess is that when the route changes, the layout is recalculated, and that is leading to a rendering error mismatch, because of content added by Olark, but I can't exactly pinpoint the issue just now.

I tried using, https://rsc-parser.vercel.app/, to figure out what's going on with the RSC update sent by the server, but nothing just yet... https://stackblitz.com/edit/github-pypuck?file=app%2Flayout.tsx,app%2Fpage.tsx,app%2F[...slug]%2Fpage.tsx,app%2Fnav.tsx