Could not resolve webauthn-p256

Help - Plug n Play PnP Web SDKs
1

Hi, I’m getting this error after adding the dependencies and running the code. Maybe I need to change some versions or add additional packages. I tried adding the package to the dependencies, but it returns other errors.

 "engine": {
    "node": "^18"
  },
  "dependencies": {
    ...
    "@wagmi/connectors": "^5.7.5",
    "@web3auth/auth-adapter": "^9.5.3",
    "@web3auth/base": "^9.5.3",
    "@web3auth/default-evm-adapter": "^9.5.3",
    "@web3auth/ethereum-provider": "^9.5.3",
    "@web3auth/no-modal": "^9.5.3",
    "@web3auth/no-modal-react-hooks": "^9.5.3",
    "@web3auth/wallet-services-plugin": "^9.5.3",
    "@web3auth/wallet-services-plugin-react-hooks": "^9.5.3",
    "@web3auth/web3auth-wagmi-connector": "^7.0.0",
    "@web3modal/wagmi": "^5.1.11",
    ...
    "viem": "^2.22.11",
    "wagmi": "^2.14.9",
    "zustand": "^4.4.1"
  },
  "devDependencies": {
    ...
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  },

After adding the web3auth dependencies, I get this error on console when running yarn dev.

X [ERROR] Could not resolve "webauthn-p256"

    node_modules/permissionless/_esm/accounts/kernel/toKernelSmartAccount.js:5:61:
      5 │ import { base64UrlToBytes, bytesToHex, parsePublicKey } from "webauthn-p256";
        ╵                                                              ~~~~~~~~~~~~~~~

  You can mark the path "webauthn-p256" as external to exclude it from the bundle, which will remove
  this error.

X [ERROR] Could not resolve "webauthn-p256"

    node_modules/permissionless/_esm/accounts/kernel/utils/signMessage.js:3:31:
      3 │ import { parseSignature } from "webauthn-p256";
        ╵                                ~~~~~~~~~~~~~~~

  You can mark the path "webauthn-p256" as external to exclude it from the bundle, which will remove
  this error.

Please help me

2

Hi Kalias Dev! :star2: It sounds like you’re encountering an issue with the webauthn-p256 package while working with the PnP Web SDK. Let’s try to resolve this together.

Steps to Troubleshoot:

  1. Ensure All Dependencies Are Properly Installed:

    • Sometimes yarn might not properly install all dependencies. Try running:
      yarn install

  2. Check for webauthn-p256 Package:

    • Make sure that webauthn-p256 is installed in your project.
    • If it’s not there, try installing it manually:
      yarn add webauthn-p256

  3. Vite Configuration:

    • If the issue persists, you may need to configure Vite to treat webauthn-p256 as an external dependency.
    • In vite.config.js, add webauthn-p256 as an external dependency:
      export default {
  build: {
    rollupOptions: {
      external: ['webauthn-p256']
    },
  },
};

  4. Update Packages:

    • Ensure all your packages are up to date. You may need to update them to resolve compatibility issues.

If these steps don’t resolve the issue, please let me know! It might also help to share browser console screenshots if there are additional errors. :blush:

Feel free to reach out if you encounter further issues or need more detailed guidance. We’re here to help! :rocket:

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

4

Hey @kaliasdeveloper

yes, it does look some version mismatch, please update to the latest version of web3auth SDKs.

Also, kindly share the init and logic code snippets.