QuickStart code sample not compatible with browser environment

Help - Plug n Play Web - Modal SDK
1

When asking for help in this category, please make sure to provide the following details:

  • SDK Version(package.json): PnP, Modal, VanillaJS
  • Platform: Windows 11, Chrome 121.0.6167.185 and Firefox 122.0.1
  • Browser Console Screenshots: See console log below
index.js:11 Uncaught ReferenceError: require is not defined
    at index.js:11:16
(anonymous) @ index.js:11

modal:2 Failed to connect with openlogin provider TypeError: w(...).createHash is not a function
    at C (modal:2:610532)
    at modal:2:613443
    at async H (modal:2:613301)
    at async V.createSession (modal:2:614874)
    at async Tt.getLoginId (modal:2:673707)
    at async Tt.openloginHandler (modal:2:674177)
    at async Tt.login (modal:2:670281)
    at async Mt.connectWithProvider (modal:2:680504)
    at async Mt.connect (modal:2:677234)
    at async ft.connectTo (modal:2:908438)
connect @ modal:2
await in connect (async)
connectTo @ modal:2
(anonymous) @ modal:2
w @ modal:2
emit @ modal:2
(anonymous) @ modal:2
C @ modal:2
handleSocialLoginClick @ modal:2
onClick @ modal:2
Le @ modal:2
ze @ modal:2
(anonymous) @ modal:2
Dn @ modal:2
jn @ modal:2
(anonymous) @ modal:2
ul @ modal:2
Te @ modal:2
Hn @ modal:2
Vt @ modal:2
Wt @ modal:2
modal:2 error TypeError: w(...).createHash is not a function
    at C (modal:2:610532)
    at modal:2:613443
    at async H (modal:2:613301)
    at async V.createSession (modal:2:614874)
    at async Tt.getLoginId (modal:2:673707)
    at async Tt.openloginHandler (modal:2:674177)
    at async Tt.login (modal:2:670281)
    at async Mt.connectWithProvider (modal:2:680504)
    at async Mt.connect (modal:2:677234)
    at async ft.connectTo (modal:2:908438) w(...).createHash is not a function
(anonymous) @ modal:2
w @ modal:2
emit @ modal:2
(anonymous) @ modal:2
w @ modal:2
emit @ modal:2
connect @ modal:2
await in connect (async)
connectTo @ modal:2
(anonymous) @ modal:2
w @ modal:2
emit @ modal:2
(anonymous) @ modal:2
C @ modal:2
handleSocialLoginClick @ modal:2
onClick @ modal:2
Le @ modal:2
ze @ modal:2
(anonymous) @ modal:2
Dn @ modal:2
jn @ modal:2
(anonymous) @ modal:2
ul @ modal:2
Te @ modal:2
Hn @ modal:2
Vt @ modal:2
Wt @ modal:2
script.js:53 w(...).createHash is not a function
(anonymous) @ script.js:53
await in (anonymous) (async)
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
modal:2 Error while connecting to adapter: openlogin WalletLoginError: Failed to connect with wallet. Failed to login with openlogin
    at y.fromCode (modal:2:893649)
    at y.connectionError (modal:2:893781)
    at Mt.connect (modal:2:677521)
    at async ft.connectTo (modal:2:908438)
    at async lt.<anonymous> (modal:2:1065941)
(anonymous) @ modal:2
await in (anonymous) (async)
w @ modal:2
emit @ modal:2
(anonymous) @ modal:2
C @ modal:2
handleSocialLoginClick @ modal:2
onClick @ modal:2
Le @ modal:2
ze @ modal:2
(anonymous) @ modal:2
Dn @ modal:2
jn @ modal:2
(anonymous) @ modal:2
ul @ modal:2
Te @ modal:2
Hn @ modal:2
Vt @ modal:2
Wt @ modal:2
192.168.100.116/:1 Uncaught (in promise) {message: 'A listener indicated an asynchronous response by r…age channel closed before a response was received'}
Promise.then (async)
(anonymous) @ geolocation-spoofing.js:17
Show 1 more frame
Show less

I just followed quickstart guide from here https://web3auth.io/docs/quick-start?product=PNP&sdk=PNP_MODAL&framework=HTML&stepIndex=1&stepIndex=0#step-1 and modified cliendId only in script.js.

I have followed “Building locally” instructions: (1) Clone the PnP Modal Vanilla JS Quick Start Application; (2) Install & Run. However, getting the error log from above.

It looks like:

  • <script src="https://cdn.jsdelivr.net/npm/buffer@6"></script> is not compatible for browser environment since it has structure for NodeJS. I have replaced it with ESM version <script type="module">import buffer from 'https://cdn.jsdelivr.net/npm/buffer@6.0.3/+esm'</script>
  • eccrypto module budled within @web3auth/modal requires native NodeJS crypto, which should have been replaced with crypto-browserify (i.e., crypto-browserify should have been budnled within @web3auth/modal minified file), but it seems it is not.

Please suggest how can I workaround this or am I doing something wrong here?
Thanks!

2

@vladimir.rogojin Thanks for your recent post.

Your issue has been forwarded to our Dev team and we will get back with further updates.