web3-onboard: Svelte App build error

Building Svelte App with rollup fails, even with example (https://codesandbox.io/s/jekzo)

First error :

$ npm run build 
...
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules/.pnpm/@ensdomains+ens@0.4.3/node_modules/@ensdomains/ens/build/contracts/ENS.json (2:16)
1: {
2:   "contractName": "ENS",
                   ^
3:   "abi": [
4:     {
Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)

After adding @rollup/plugin-json , new error :

[!] Error: 'toBuffer' is not exported by node_modules/.pnpm/ethereumjs-util@7.1.0/node_modules/ethereumjs-util/dist/index.js, imported by node_modules/.pnpm/bnc-onboard@1.31.0/node_modules/bnc-onboard/dist/esm/index-9156d65a.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/.pnpm/bnc-onboard@1.31.0/node_modules/bnc-onboard/dist/esm/index-9156d65a.js (35:9)
33: import 'bowser';
34: import '@ensdomains/ensjs';
35: import { toBuffer } from 'ethereumjs-util';
             ^
36: var HANDLE_PIN_PRESS = 'handlePinPress';
37: var BUTTON_COLOR = "#EBEBED";

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (5 by maintainers)

Most upvoted comments

Hey all,

Apologies for all the issues trying to get Onboard working nicely with Svelte. We use Svelte internally at Blocknative for all of our frontends, so we’d love to improve the developer experience here.

The main issue is that bundlers like Rollup, Vite and Snowpack (which are all commonly used with Svelte) don’t have good support for bundling in the node builtins, especially the crypto module. A lot of the wallets we support need these builtins to work correctly and that is what is causing a lot of the errors.

We are actively working on a V2 of Onboard which (among other features) will separate all of the wallets in to it’s own mono repo with all of the packages so that we can isolate these dependency problems from the main library. We are also going to go through and reduce and hopefully remove the node builtin dependencies if possible or bundle the necessary deps in with the wallet modules.

In the meantime I have a working template repo for Svelte that you can check out. It uses Webpack 4 as the bundler. It seems to be a lot more difficult to bundle the node builtins in Webpack 5 so I couldn’t get that working at the moment.

aaronbarnardsound on Oct 14, 2021