Not working on nextjs #140

Activity

1. praty22 commented on Apr 14, 2022

   

   praty22

   on Apr 14, 2022

   More actions

   Faced the same issue, any help would be appreciated.
2. devgrigor commented on Apr 14, 2022

   

   devgrigor

   on Apr 14, 2022

   Author

   More actions

   Here is the thing, as I understand it, the lib is doing something on require and not on initialization by constructor.
   Here is a working workaround

     try {
       // This is not working anyway else, it performs an action on require which is
       // throwing error build time
       const client = require('clientjs')
       const browser = new client.ClientJS()
       // The rest of the usage
     }
     catch () {
       // Do nothing
     }
   

   👍React with 👍1Reacted by Moniruzzaman Sujon
3. praty22 commented on Apr 14, 2022

   

   praty22

   on Apr 14, 2022

   More actions

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

   👍React with 👍1Reacted by devgrigor
4. hacknlove commented on Apr 22, 2022

   

   hacknlove

   on Apr 22, 2022

   More actions

   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

   👍React with 👍4Reacted by roxennnn, darktm, Vitalii and Yoko Hailemariam
5. BendingBender commented on Apr 22, 2022

   

   BendingBender

   on Apr 22, 2022

   Collaborator

   More actions

   You can use the dist/client.base.min.js as described in the docs. This should work without executing any code upon a require call/import. It also has the benefit of being much smaller without losing any functionality on modern browsers.

   👍React with 👍1Reacted by sangnt-sysvpn
6. sangnt-sysvpn commented on Jul 17, 2023

   

   sangnt-sysvpn

   on Jul 17, 2023

   More actions

   You can use the dist/client.base.min.js as described in the docs. This should work without executing any code upon a require call/import. It also has the benefit of being much smaller without losing any functionality on modern browsers.

   thanks!! I have tried and succeeded.
7. git-sujon commented on Dec 19, 2023

   

   git-sujon

   on Dec 19, 2023

   Last edited by git-sujon

   More actions

   Here is the thing, as I understand it, the lib is doing something on require and not on initialization by constructor. Here is a working workaround

     try {
       // This is not working anyway else, it performs an action on require which is
       // throwing error build time
       const client = require('clientjs')
       const browser = new client.ClientJS()
       // The rest of the usage
     }
     catch () {
       // Do nothing
     }
   

   thanks this code works for me. It solves my "ReferenceError: navigator is not defined" error when I try to build the next.js application. this is how I implemented it... maybe it can help someone...

   `
   const onFinish = async (values: ILogin) => {
   try {
   const ClientJs = require("clientjs");
   const client = new ClientJs.ClientJS();

     const fingerprint = client?.getBrowserData();
   
     const deviceId = client?.getFingerprint();
   
     const data = {
       ...values,
       devicesInfo: {
         devicesId: deviceId?.toString(),
         devicesModel: fingerprint?.device?.model,
         devicesType: fingerprint?.device?.type,
         devicesVendor: fingerprint?.device?.vendor,
         browserName: fingerprint?.browser?.name,
         browserVersion: fingerprint?.browser?.version,
         engineName: fingerprint?.engine?.name,
         engineVersion: fingerprint?.engine?.version,
         osName: fingerprint?.os?.name,
         osVersion: fingerprint?.os?.version,
         cpuArchitecture: fingerprint?.cpu?.architecture,
         agentClient: fingerprint?.ua,
       },
     };
   
     const response = await userLogin({ ...data }).unwrap();
   
     if (response?.data?.accessToken) {
       storeUserInfo({ accessToken: response?.data?.accessToken });
       message.success(`${response?.message}`);
       if (isLoading) {
         return <LoadingPage />;
       }
       const { role } = getUserInfo() as IJwtDecoded;
   
       router.push(`/${role}`);
     }
   } catch (error: any) {
     if (error?.data?.message) {
       message.error(error?.data?.message);
     }
   }
   

   };
   `

   👍React with 👍1Reacted by Moniruzzaman Sujon
8. ravi-ojha commented on Mar 19, 2024

   

   ravi-ojha

   on Mar 19, 2024

   More actions

   @BendingBender The problem with including a "pre-minified" JS code is that there's no solid way to verify whether the source and minified version match. This could be a serious risk for certain websites that deal with PII and financial data. Most of today's fav frameworks are webpack/vite based, and they have configs for minifications.

   Not saying that the minified files in dist do anything malicious.
9. DevHeauk commented on Apr 11, 2024

   

   DevHeauk

   on Apr 11, 2024

   More actions

   same issue
10. yutingzhao1991 commented on Nov 11, 2024

    

    yutingzhao1991

    on Nov 11, 2024

    More actions

    same issue, clientjs should not access navigate during initialization.