fingerprintjs/fingerprintjs-pro-react

Breaks navigation in Next.js

davidknezic opened this issue · 3 comments

davidknezic commented

I noticed that adding this library to an existing Next.js project according to the docs breaks the navigation (particularily next/link) on my entire site.

While trying to find out if this was due to my project, I extended the Next.js example in examples/next with a new test.tsx page and a link in index.tsx and could successfully reproduce the issue.

Clicking on the link changes the URL but doesn't navigate. This seems to have to do with the fact that FPJS is integrated in the _app.tsx layout. When I tried adding the provider on a single page only, things worked as expected.

How to reproduce?

Add test.tsx to examples/next/pages:

import type { NextPage } from 'next'

const Test: NextPage = () => <h1>test</h1>

export default Test

Add link to examples/next/pages/index.tsx:

import Link from 'next/link'

<Link href='/test'>
  <a>test</a>
</Link>

Click new link.

TheUnderScorer commented

Hey @davidknezic!

Thanks for reporting this issue and providing details for reproduction.

Just wanted to let you know that I've started investigating it.

  • 👍1
ilfa commented

🎉 This issue has been resolved in version 1.4.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

TheUnderScorer commented

We've fixed the issue, it was introduced in 1.4.0 release in which our environment detection was refactored.

The culprit was this:

shouldComponentUpdate() {
    return false
  }

in WithEnviornment component which prevented re-rendering after the route was changed. The same issue would also occur in react-router-dom.

  • 👍2