Error: SubtleCrypto not available! when initializing WebBundlr

[hansy]

• NextJS v12.1.5
• React v17.0.2
• Bundlr v0.11.9

Running into the error Error: SubtleCrypto not available! when trying to load Bundlr in the browser via:

const bundlr = new WebBundlr(
   "https://devnet.bundlr.network",
   "matic",
   provider
);

Stack trace:

Uncaught     at new WebCryptoDriver (file:///Users/user/projects/project/node_modules/arweave/web/lib/crypto/webcrypto-driver.js:10:19)
    at Object.<anonymous> (file:///Users/user/projects/project/node_modules/arweave/web/common.js:120:18)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (file:///Users/user/projects/project/node_modules/arweave/web/index.js:17:18)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)

Maybe looks like there's an underlying dependency issue with arweave, but I'm not sure how to resolve this. I took a look at this issue but it's unclear what my next step should be other than to mess around with different versions.

Any suggestions on how to proceed?

[lukecd]

GM ... Can you try changing your import statement to

import Bundlr from "@bundlr-network/client/node

[JesseTheRobot]

Hey @hansy , thanks for the issue Couple quick questions so I can figure out what's going on: 1.) what NodeJS version are you using? 2.) are you trying to use WebBundlr in a server side/API route/component?

if you're doing 2.), you'll want to change the import to Bundlr, (if the error persists, use NodeBundlr), as WebBundlr will produce the error you're seeing if it tries to run in a NodeJS context.

Feel free to join our Discord and we can chat in real time

[JesseTheRobot]

Hey @hansy , any updates on this? If you've resolved please close this issue - if not, let me know - I'm more than willing to help out!

[hansy]

Hey! Thanks for the prompt replies! Let me answer your questions here:

GM ... Can you try changing your import statement to

import Bundlr from "@bundlr-network/client/node

@lukecd The project can't find the path "@bundlr-network/client/node" so I don't think I can import Bundlr in this way.

1.) what NodeJS version are you using? 2.) are you trying to use WebBundlr in a server side/API route/component?

@JesseTheRobot, Node v16.18.0. I'm using WebBundlr in a React client-side component (initializing the instance inside a useEffect hook).

Also thanks for the Discord invite!

[JesseTheRobot]

Are you importing the client in a context that could be run server side? If you have a file with both client and server side code it can cause this issue. If you happen to have some code I can look at that would be fab.

If you can, join the discord and @ me, I've got faster response times there.

[hansy]

Ah yeah you're right. Importing the library happens server-side, even though initialization happens on the client.

The error goes away for me when I do this:

import { useEffect, useState } from "react";
import { type WebBundlr } from "@bundlr-network/client";

export default function MyComponent() {
  const [bundlr, setBundlr] = useState<WebBundlr | undefined>(undefined)

  useEffect(() => {
    const loadBundlr = async () => {
      const WebBundlr = (await import("@bundlr-network/client")).WebBundlr;

      const provider = {
        // provider info
      };
      const bundlr = new WebBundlr(
        "https://devnet.bundlr.network",
        "matic",
        provider
      );

      setBundlr(bundlr);
    }

    loadBundlr()
  }, [])

  return <div></div>
}

I haven't actually tested if I can create transactions and upload data yet lol, but I'm pretty confident everything else should be much smoother from here on out. Thanks so much for your help!

[JesseTheRobot]

Excellent, glad to see that solved the problem. Any further issues lmk!