JS package not working with Rails 7 importmap

Question

I have a Rails 7 app that is trying to use the @walletconnect/web3-provider npm package. After running ./bin/importmap pin @walletconnect/web3-provider@1.7.5, a bunch of JS modules get pinned in importmap.rb:

pin "@walletconnect/web3-provider", to: "https://ga.jspm.io/npm:@walletconnect/web3-provider@1.7.5/dist/esm/index.js"
pin "@walletconnect/browser-utils", to: "https://ga.jspm.io/npm:@walletconnect/browser-utils@1.7.8/dist/esm/index.js"
pin "@walletconnect/client", to: "https://ga.jspm.io/npm:@walletconnect/client@1.7.8/dist/esm/index.js"
pin "@walletconnect/core", to: "https://ga.jspm.io/npm:@walletconnect/core@1.7.8/dist/esm/index.js"
pin "@walletconnect/crypto", to: "https://ga.jspm.io/npm:@walletconnect/crypto@1.0.2/dist/esm/browser/index.js"
pin "@walletconnect/encoding", to: "https://ga.jspm.io/npm:@walletconnect/encoding@1.0.1/dist/esm/index.js"
pin "@walletconnect/environment", to: "https://ga.jspm.io/npm:@walletconnect/environment@1.0.0/dist/cjs/index.js"
pin "@walletconnect/http-connection", to: "https://ga.jspm.io/npm:@walletconnect/http-connection@1.7.8/dist/esm/index.js"
pin "@walletconnect/iso-crypto", to: "https://ga.jspm.io/npm:@walletconnect/iso-crypto@1.7.8/dist/esm/index.js"
pin "@walletconnect/jsonrpc-types", to: "https://ga.jspm.io/npm:@walletconnect/jsonrpc-types@1.0.1/dist/esm/index.js"
pin "@walletconnect/jsonrpc-utils", to: "https://ga.jspm.io/npm:@walletconnect/jsonrpc-utils@1.0.3/dist/esm/index.js"
pin "@walletconnect/qrcode-modal", to: "https://ga.jspm.io/npm:@walletconnect/qrcode-modal@1.7.8/dist/cjs/index.js"
pin "@walletconnect/randombytes", to: "https://ga.jspm.io/npm:@walletconnect/randombytes@1.0.2/dist/esm/browser/index.js"
pin "@walletconnect/safe-json", to: "https://ga.jspm.io/npm:@walletconnect/safe-json@1.0.0/dist/esm/index.js"
pin "@walletconnect/socket-transport", to: "https://ga.jspm.io/npm:@walletconnect/socket-transport@1.7.8/dist/esm/index.js"
pin "@walletconnect/utils", to: "https://ga.jspm.io/npm:@walletconnect/utils@1.7.8/dist/esm/index.js"
pin "@walletconnect/window-getters", to: "https://ga.jspm.io/npm:@walletconnect/window-getters@1.0.0/dist/cjs/index.js"
pin "@walletconnect/window-metadata", to: "https://ga.jspm.io/npm:@walletconnect/window-metadata@1.0.0/dist/cjs/index.js"
pin "bn.js", to: "https://ga.jspm.io/npm:bn.js@4.11.8/lib/bn.js"
pin "buffer", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/buffer.js"
pin "cookiejar", to: "https://ga.jspm.io/npm:cookiejar@2.1.3/cookiejar.js"
pin "copy-to-clipboard", to: "https://ga.jspm.io/npm:copy-to-clipboard@3.3.1/index.js"
pin "decode-uri-component", to: "https://ga.jspm.io/npm:decode-uri-component@0.2.0/index.js"
pin "detect-browser", to: "https://ga.jspm.io/npm:detect-browser@5.2.0/index.js"
pin "dijkstrajs", to: "https://ga.jspm.io/npm:dijkstrajs@1.0.2/dijkstra.js"
pin "eventemitter3", to: "https://ga.jspm.io/npm:eventemitter3@4.0.7/index.js"
pin "http", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/http.js"
pin "https", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/https.js"
pin "is-typedarray", to: "https://ga.jspm.io/npm:is-typedarray@1.0.0/index.js"
pin "isarray", to: "https://ga.jspm.io/npm:isarray@2.0.5/index.js"
pin "js-sha3", to: "https://ga.jspm.io/npm:js-sha3@0.8.0/src/sha3.js"
pin "os", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/os.js"
pin "preact", to: "https://ga.jspm.io/npm:preact@10.4.1/dist/preact.module.js"
pin "preact/compat", to: "https://ga.jspm.io/npm:preact@10.4.1/compat/dist/compat.module.js"
pin "preact/hooks", to: "https://ga.jspm.io/npm:preact@10.4.1/hooks/dist/hooks.module.js"
pin "process", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/process-production.js"
pin "qrcode", to: "https://ga.jspm.io/npm:qrcode@1.4.4/lib/browser.js"
pin "qrcode/lib/utils/buffer.js", to: "https://ga.jspm.io/npm:qrcode@1.4.4/lib/utils/typedarray-buffer.js"
pin "query-string", to: "https://ga.jspm.io/npm:query-string@6.13.5/index.js"
pin "split-on-first", to: "https://ga.jspm.io/npm:split-on-first@1.1.0/index.js"
pin "strict-uri-encode", to: "https://ga.jspm.io/npm:strict-uri-encode@2.0.0/index.js"
pin "toggle-selection", to: "https://ga.jspm.io/npm:toggle-selection@1.0.6/index.js"
pin "typedarray-to-buffer", to: "https://ga.jspm.io/npm:typedarray-to-buffer@3.1.5/index.js"
pin "url", to: "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/url.js"
pin "xhr2-cookies", to: "https://ga.jspm.io/npm:xhr2-cookies@1.1.0/dist/index.js"

I import the package in application.js:

import "@walletconnect/web3-provider"

And then I try to import a specific module in my custom JS file (which is also imported in application.js):

import WalletConnectProvider from "@walletconnect/web3-provider";

When I start the server and visit the site in the browser, it shows following error:

Uncaught SyntaxError: The requested module 'js-sha3' does not provide an export named 'keccak_256' (at index.js:1:189)

I don't understand why this error is happening. When I look at the js-sha3 repo, I see that keccak_256 is exported here. So, why is this error happening?

Thanks!

Answer 1

What you linked to is a TS type definition. It has no runtime effect. It's just there for type hints in your editor.

That package is only distributed as CJS -- there are no exports, and you cannot use it without a bundler. Using it directly in the browser (as you attempt to) will not work.