Not working on nextjs

The lib is throwing the following error when next build is ran ReferenceError: navigator is not defined at Object.getBrowser (C:\projects\web-ssd-cms-api-bakcend\web-ssd-website-frontend\node_modules\clientjs\src\vendor\deployJava.js:1150:21) at Object.writePluginTag (C:\projects\web-ssd-cms-api-bakcend\web-ssd-website-frontend\node_modules\clientjs\src\vendor\deployJava.js:1365:24) at Object.<anonymous> (C:\projects\web-ssd-cms-api-bakcend\web-ssd-website-frontend\node_modules\clientjs\src\vendor\deployJava.js:1423:12) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions…js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.<anonymous> (C:\projects\web-ssd-cms-api-bakcend\web-ssd-website-frontend\node_modules\clientjs\src\modules\java-detection.js:3:18) { type: ‘ReferenceError’ }

Even if one puts try catch on the block it still does this, because the issue is in import method. It tries to do something with navigator import time, but I believe it should do anything only when new ClientJS is called

[hacknlove]

You can create a component that you can import and use dynamically

The component:

import { ClientJS  } from 'clientjs'
import { useEffect } from 'react';

export default function ClientJsComponent({ setFingerPrint }) {
  useEffect(() => {
    const client = new ClientJS();
    const fingerprint = client.getFingerprint();
    setFingerPrint(fingerprint);
  }, [])

  return null
}

How to use it

import { useState } from 'react';
import dynamic from 'next/dynamic'

const ClientJs = dynamic(() => import('./components/ClientJs'), { ssr: false });

export default function Page () {
  const [fingerPrint, setFingerPrint] = useState()
  
  return (
    <>
        {fingerPrint}
        <ClientJs setFingerPrint={setFingerPrint} />
    </>
 )
}

Maybe it’s not elegant, but it might do it.

Another option is to copy the ClientJs min script to public, load it with <Script src="/ClientJS.min.js" onLoad={doSomething} /> and run a functión when it’s ready

[praty22]

Didn’t work for me, Falling back to fingerprintJs. Thanks for the quick response.