Can't resolve 'WebSdk' (React, Windows 10, U.are.U 4500 Fingerprint Reader)

[ahmed-alii]

H, Please take a look at the following. I have read the issues specifically #4 but not sure how it can be resolved in react app

./node_modules/@digitalpersona/devices/dist/es5.bundles/index.umd.js Module not found: Can't resolve 'WebSdk' in 'E:\digitalpersona-react-sample\node_modules\@digitalpersona\devices\dist\es5.bundles'

I am experiencing the above issue on a react sample provided here

My Setup

• Drivers Installed in Windows 10
• Lite Client Installed
• Device listening on port 52181 & port 9001 is also open
• https://127.0.0.1:52181/get_connection ----->>> {"endpoint":"https://127.0.0.1:9001/?web_sdk_id=5e5a1211-0b1d-4f3a-8b18-ee057f7a6127&web_sdk_minport=9001&web_sdk_port=9001&web_sdk_secure=true&web_sdk_username=kY_fyw4wmJ4&web_sdk_password=8D2E5C87BDBE072F&web_sdk_salt=ACDCB7545A8C39CB3BB93613FEA54C9377A3A62C6ED6B9F545C49DF014DA13D3"}

This react app is rendering Client Side. So any kind of library included runs on the browser.

Index.html contains the websdk.client.min.js file.

Other Libraries are included inside App.js
import {BioSample} from "@digitalpersona/core";
import {FingerprintsAuth} from '@digitalpersona/authentication';
import {IAuthService} from '@digitalpersona/services';
import {FingerprintReader, SampleFormat} from '@digitalpersona/devices';

[a-bronx]

Hello,

The WebSdk is a browser-only library, and must be loaded only into a browser context -- either as a static resource, or as a part of a bundle. The error message suggests that you try to load the WebSdk from the node_modules, which is clearly not expected to be seen in a browser. You must exclude the WedSdk library from a Node module resolution, and the code that depends on it must execute only in a browser as well.

[teknosains]

Hello,

The WebSdk is a browser-only library, and must be loaded only into a browser context -- either as a static resource, or as a part of a bundle. The error message suggests that you try to load the WebSdk from the node_modules, which is clearly not expected to be seen in a browser. You must exclude the WedSdk library from a Node module resolution, and the code that depends on it must execute only in a browser as well.

no example provided, im frustated :(. Can you please help how to use this in vanillaJS or React

[a-bronx]

Hello, the link to an example was provided many times, in a documentation and in a pinned issue #4.

[Salman9000]

I managed to solve it. Make sure your websdk is in src folder.
Inside your node_modules, go to @digitalpersona/devices/dist/es5.bundles/index.umd.js
change line number 2 from typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@digitalpersona/core'), require('WebSdk')) :
to typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@digitalpersona/core'), require('../../../../../src/webSdk')) :

done :)

[a-bronx]

require('../../../../../src/webSdk'))

While it may work in your specific case, I cannot recommend it. If you need to resort to hard-coded import paths instead of a module name, then it is most probably something wrong with your module resolution settings. I'd advise to find and fix the root cause of the problem. The WebSdk library must be in a list of "globals", like any other global JS library. For example, if you use a Webpack, then you need to add in into your Webpack config like this:

module.exports = {
   ...
    externals: [
        { WebSdk: {
            root: "WebSdk"
        }},
       // ... other globals  
   }
  ...
}

Also, if you use Typescript, you may need to add the path to your global modules into the tsconfig.json:

      "typeRoots": [
        "node_modules/@types",
        "./@types",
        "src/modules"
      ],

-- given that the WebSdk's index.js and index.d.ts are placed in the src/modules/WebSdk/ directory

Check documentation for your bundler and module resolution algoritm.

[Salman9000]

I am using CRA, and the built-in webpack configuration is a spaghetti for me. It is better if i dont touch the webpack

[fayizqureshii]

Hey @ahmed-alii , Do you figure this out with your react app?

[locent217]

@a-bronx Hello sir! Can you help me on how to add WebSdk on globals of vite? Thank you!

[a-bronx]

I have no familiarity with Vite, you'll need to read their docs.

[CZEJAY]

it's almost impossible to use the sdk in a next.js project, i have been trying for a couple of days now still stuck in the same "Module not found: Can't resolve 'WebSdk'" Error, please sir i need help on this one.