Svelte App build error - Githubissues

zapaz commented 3 years ago

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";

taylorjdawson commented 3 years ago

@zapaz Please see this section on Rollup Builds in our documentation.

If that still does't work please respond to this issue, thanks!

zapaz commented 3 years ago

added "rollup-plugin-node-polyfills" but still some error :



> onboard-custom-wallet-demo@1.0.0 build  onboard-custom-wallet-demo
> rollup -c

index.js → public/bundle.js...
(node:22275) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/alain/DEV/onboard-custom-wallet-demo/node_modules/.pnpm/rxjs@6.6.7/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:22275) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/alain/DEV/onboard-custom-wallet-demo/node_modules/.pnpm/async-mutex@0.2.6/node_modules/tslib/package.json.
Update this package.json to use a subpath pattern like "./*".

<--- Last few GCs --->

[22275:0x148008000]    35743 ms: Scavenge (reduce) 2039.1 (2083.3) -> 2038.4 (2083.3) MB, 2.2 / 0.0 ms  (average mu = 0.339, current mu = 0.353) allocation failure
[22275:0x148008000]    35747 ms: Scavenge (reduce) 2039.3 (2083.3) -> 2038.6 (2083.3) MB, 2.0 / 0.0 ms  (average mu = 0.339, current mu = 0.353) allocation failure
[22275:0x148008000]    35766 ms: Scavenge (reduce) 2039.3 (2083.3) -> 2039.3 (2083.8) MB, 19.4 / 0.0 ms  (average mu = 0.339, current mu = 0.353) allocation failure

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10231e69c node::Abort() [/usr/local/bin/node]
 2: 0x10231e824 node::errors::TryCatchScope::~TryCatchScope() [/usr/local/bin/node]
 3: 0x10246abdc v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]```

I will rather try Webpack...

taylorjdawson commented 3 years ago

@zapaz What does your rollup config look like?

zapaz commented 3 years ago

here it is :

// this file will not afect the sandbox but will
// afect the deployment and dowload

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
import { terser } from "rollup-plugin-terser";
import css from "rollup-plugin-css-only";
import nodePolyfills from "rollup-plugin-node-polyfills";

const production = !process.env.ROLLUP_WATCH;

export default {
  input: "index.js",
  output: {
    sourcemap: true,
    format: "esm",
    name: "app",
    file: "public/bundle.js",
  },
  plugins: [
    svelte({
      compilerOptions: {
        dev: !production,
      },
    }),
    css({ output: "public/bundle.css" }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration —
    // consult the documentation for details:
    // https://github.com/rollup/rollup-plugin-commonjs
    resolve({
      browser: true,
      preferBuiltins: true,
    }),
    commonjs({
      namedExports: {
        "u2f-api": ["sign", "isSupported"],
      },
    }),
    nodePolyfills(),
    json(),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),
  ],
};

davidcallanan commented 3 years ago

I am having a similar error with SvelteKit: https://stackoverflow.com/questions/69302056/sveltekit-cannot-import-onboard-js?noredirect=1#comment122564637_69302056

I have also tried modifying the rollup configuration.

Maybe it's a problem with Svelte and not this package though.

xpluscal commented 3 years ago

@taylorjdawson is there a realistic way to get onboardjs to work with a sapper application? The rollup build suggestions don't really apply when using sapper.

Help appreciated! Thx

davidcallanan commented 3 years ago

@xpluscal If you can't get a solution, you could consider switching to Web3Modal, which is working well for me so far.

xpluscal commented 3 years ago

@davidcallanan thx, we're using Web3Modal atm and are looking for a way to get hardware wallet support in. Do you have any experience with hardware wallet support on Web3Modal?

davidcallanan commented 3 years ago

@xpluscal No, I haven't used hardware wallets yet sorry.

zapaz commented 3 years ago

@xpluscal If you can't get a solution, you could consider switching to Web3Modal, which is working well for me so far.

did the same !

but it's a pity not beeing able to use onboard with Svelte ;-(

xpluscal commented 3 years ago

Yeah, right? Especially considering parts of onboard are built with svelte :)

Sent via Superhuman iOS @.***>

On Wed, Oct 13 2021 at 9:45 AM, Alain Papazoglou @.***> wrote:

@xpluscal https://github.com/xpluscal If you can't get a solution, you could consider switching to Web3Modal https://github.com/Web3Modal/web3modal, which is working well for me so far.

did the same !

but it's a pity not beeing able to use onboard with Svelte ;-(

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/blocknative/onboard/issues/667#issuecomment-942020997, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4I6YVJML6KYDKCSBESXF3UGU2H7ANCNFSM5CQDUGIQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

lnbc1QWFyb24 commented 2 years ago

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.

taylorjdawson commented 2 years ago

@xpluscal @davidcallanan @zapaz Please see comment by @theurgi as they have presented a build configuration for svelte kit that is working. Sorry for all of the trouble this issue has caused!

jakubdonovan commented 2 years ago

Any chance to get this working with SvelteKit Vite?

taylorjdawson commented 2 years ago

@jakubdonovan can you see if the vite config in this repo works for you? It is react but should work for both

taylorjdawson commented 2 years ago

@jakubdonovan Specifically here is important

jakubdonovan commented 2 years ago

@jakubdonovan Specifically here is important

Okay, so I installed web3-onboard and pasted the sveltekit config. The modal works, but I ran into a number of issues. Some were fixed in last night's update, but two app breaking issues remained.

Here is a repository I made just for this https://github.com/jakubdonovan/web3-onboard-svelte

1: The app fails to build with npm run build

onboard-test on  master [!] via  v17.2.0 took 3m36s ❯ npm run build blank-supabase@0.0.1 build svelte-kit build

vite v2.9.1 building for production... ✓ 902 modules transformed. .svelte-kit/output/client/_app/manifest.json .svelte-kit/output/client/_app/pages/__layout.svelte-262df0f1.js .svelte-kit/output/client/_app/error.svelte-dbbbbc49.js .svelte-kit/output/client/_app/pages/index.svelte-1482e438.js .svelte-kit/output/client/_app/chunks/index-4e97ed67.js .svelte-kit/output/client/_app/chunks/index-a11dff51.js .svelte-kit/output/client/_app/start-42770ad0.js .svelte-kit/output/client/_app/chunks/mobile-36eff9c3.js .svelte-kit/output/client/_app/chunks/icon-ab2a4f6d.js .svelte-kit/output/client/_app/chunks/index-c6d1826a.js .svelte-kit/output/client/_app/chunks/index-e1bee543.js .svelte-kit/output/client/_app/chunks/metamask-db57a758.js .svelte-kit/output/client/_app/chunks/brave-eb140ee4.js .svelte-kit/output/client/_app/chunks/coinbase-ee07f467.js .svelte-kit/output/client/_app/chunks/trust-ae639413.js .svelte-kit/output/client/_app/chunks/detected-29b2fdc8.js .svelte-kit/output/client/_app/chunks/opera-b9006edb.js .svelte-kit/output/client/_app/chunks/alphawallet-5a234a03.js .svelte-kit/output/client/_app/chunks/status-940845c8.js .svelte-kit/output/client/_app/chunks/atoken-c3378c96.js .svelte-kit/output/client/_app/chunks/zipWith-36b06beb.js .svelte-kit/output/client/_app/chunks/blockwallet-d7636c27.js .svelte-kit/output/client/_app/chunks/dcent-2a2e6b38.js .svelte-kit/output/client/_app/chunks/hyperpay-fde99ff2.js .svelte-kit/output/client/_app/chunks/bitpie-0fdb9a6b.js .svelte-kit/output/client/_app/chunks/huobiwallet-4ff47423.js .svelte-kit/output/client/_app/chunks/imtoken-2e24ca2c.js .svelte-kit/output/client/_app/chunks/frame-c63065cd.js .svelte-kit/output/client/_app/chunks/ownbit-d484ea79.js .svelte-kit/output/client/_app/chunks/tokenpocket-8f737f3e.js .svelte-kit/output/client/_app/chunks/meetone-38b74bcd.js .svelte-kit/output/client/_app/chunks/liquality-10e9b17a.js .svelte-kit/output/client/_app/chunks/xdefi-532667f6.js .svelte-kit/output/client/_app/chunks/mykey-d40bc952.js .svelte-kit/output/client/_app/assets/index-190c917e.css .svelte-kit/output/client/_app/chunks/tokenary-999a59a2.js .svelte-kit/output/client/_app/chunks/oneInch-259936b5.js .svelte-kit/output/client/_app/chunks/tp-0e31d205.js .svelte-kit/output/client/_app/assets/pages/__layout.sve .svelte-kit/output/client/_app/chunks/tallywallet-7c084638.js .svelte-kit/output/client/_app/chunks/binance-623efcc0.js .svelte-kit/output/client/_app/chunks/index-a9c075d2.js .svelte-kit/output/client/_app/chunks/index-d413fcec.js .svelte-kit/output/client/_app/chunks/index-97d6a8e8.js 11.37 KiB 0.53 KiB / gzip: 0.35 KiB 1.56 KiB / gzip: 0.74 KiB 0.14 KiB / gzip: 0.11 KiB 0.79 KiB / gzip: 0.48 KiB 7.11 KiB / gzip: 2.89 KiB 22.39 KiB / gzip: 8.44 KiB 7.82 KiB / gzip: 3.10 KiB 1.57 KiB / gzip: 0.70 KiB 13.27 KiB / gzip: 4.58 KiB 3.00 KiB / gzip: 1.35 KiB 3.85 KiB / gzip: 1.09 KiB 7.18 KiB / gzip: 2.60 KiB 0.77 KiB / gzip: 0.37 KiB 2.52 KiB / gzip: 1.09 KiB 0.45 KiB / gzip: 0.29 KiB 1.87 KiB / gzip: 0.81 KiB 5.18 KiB / gzip: 2.39 KiB 0.54 KiB / gzip: 0.32 KiB 1.68 KiB / gzip: 0.80 KiB 26.45 KiB / gzip: 7.98 KiB 0.36 KiB / gzip: 0.25 KiB 1.12 KiB / gzip: 0.62 KiB 0.66 KiB / gzip: 0.37 KiB 3.20 KiB / gzip: 1.32 KiB 1.33 KiB / gzip: 0.66 KiB 1.53 KiB / gzip: 0.84 KiB 0.68 KiB / gzip: 0.37 KiB 1.71 KiB / gzip: 0.96 KiB 0.94 KiB / gzip: 0.52 KiB 2.87 KiB / gzip: 2.07 KiB 1.40 KiB / gzip: 0.74 KiB 2.12 KiB / gzip: 1.17 KiB 19.40 KiB / gzip: 14.61 KiB 1.46 KiB / gzip: 0.46 KiB 0.72 KiB / gzip: 0.45 KiB 6.64 KiB / gzip: 2.87 KiB 18.33 KiB / gzip: 13.88 KiB lte-61d80ba0.css 4.25 KiB / gzip: 1.69 KiB 9.82 KiB / gzip: 4.48 KiB 21.94 KiB / gzip: 16.60 KiB 97.28 KiB / gzip: 27.26 KiB 101.46 KiB / gzip: 33.84 KiB 1022.15 KiB / gzip: 324.46 KiB

(!) Some chunks are larger than 500 KiB after minification. Consider:

Using dynamic import() to code-split the application

Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks

Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. vite v2.9.1 building SSR bundle for production... ✓ 1046 modules transformed. Generated an empty chunk: "hooks" .svelte-kit/output/server/manifest.json 1.21 KiB .svelte-kit/output/server/index.js 65.52 KiB .svelte-kit/output/server/entries/pages/__layout.svelte.js 0.25 KiB .svelte-kit/output/server/entries/fallbacks/error.svelte.js 0.72 KiB .svelte-kit/output/server/chunks/index-110612cb.js 2.78 KiB .svelte-kit/output/server/chunks/hooks-1c45ba0b.js 0.00 KiB .svelte-kit/output/server/entries/pages/index.svelte.js 1002.83 KiB TypeError: Cannot read properties of undefined (reading 'string') at file:///Users/jakubdonovan/Documents/code/onboard-test/.svelte-kit/output/server/entries/pages/index.svelte.js:16959:24 at ModuleJob.run (node:internal/modules/esm/module_job:195:25) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:331:24) at async Promise.all (index 1) at async respond$1 (file:///Users/jakubdonovan/Documents/code/onboard-test/.svelte-kit/output/server/index.js:1480:13) at async resolve (file:///Users/jakubdonovan/Documents/code/onboard-test/.svelte-kit/output/server/index.js:1859:105) at async respond (file:///Users/jakubdonovan/Documents/code/onboard-test/.svelte-kit/output/server/index.js:1815:22) at async visit (file:///Users/jakubdonovan/Documents/code/onboard-test/node_modules/@sveltejs/kit/dist/chunks/index2.js:1094:20)

500 / at file:///Users/jakubdonovan/Documents/code/onboard-test/node_modules/@sveltejs/kit/dist/chunks/index2.js:980:11 at save (file:///Users/jakubdonovan/Documents/code/onboard-test/node_modules/@sveltejs/kit/dist/chunks/index2.js:1213:4) at visit (file:///Users/jakubdonovan/Documents/code/onboard-test/node_modules/@sveltejs/kit/dist/chunks/index2.js:1104:3) at processTicksAndRejections (node:internal/process/task_queues:96:5)

Lastly, adding ledger, trezor, or gnosis all results in the following error

✘ [ERROR] Could not read from file: /Users/jakubdonovan/Documents/code/onboard-test/crypto-browserify
node_modules/eccrypto/browser.js:9:25:
  9 │ var nodeCrypto = require('crypto');
    ╵                          ~~~~~~~~
✘ [ERROR] Could not read from file: /Users/jakubdonovan/Documents/code/onboard-test/stream-browserify
node_modules/cipher-base/index.js:2:24:
  2 │ var Transform = require('stream').Transform
    ╵                         ~~~~~~~~
02:31:49 [vite] error while updating dependencies: Error: Build failed with 2 errors: node_modules/cipher-base/index.js:2:24: ERROR: Could not read from file: /Users/jakubdonovan/Documents/code/onboard-test/stream-browserify node_modules/eccrypto/browser.js:9:25: ERROR: Could not read from file: /Users/jakubdonovan/Documents/code/onboard-test/crypto-browserify at failureErrorWithLog (/Users/jakubdonovan/Documents/code/onboard-test/node_modules/esbuild/lib/main.js:1603:15) at /Users/jakubdonovan/Documents/code/onboard-test/node_modules/esbuild/lib/main.js:1249:28 at runOnEndCallbacks (/Users/jakubdonovan/Documents/code/onboard-test/node_modules/esbuild/lib/main.js:1034:63) at buildResponseToResult (/Users/jakubdonovan/Documents/code/onboard-test/node_modules/esbuild/lib/main.js:1247:7) at /Users/jakubdonovan/Documents/code/onboard-test/node_modules/esbuild/lib/main.js:1356:14 at /Users/jakubdonovan/Documents/code/onboard-test/node_modules/esbuild/lib/main.js:666:9 at handleIncomingPacket (/Users/jakubdonovan/Documents/code/onboard-test/node_modules/esbuild/lib/main.js:763:9) at Socket.readFromStdout (/Users/jakubdonovan/Documents/code/onboard-test/node_modules/esbuild/lib/main.js:632:7) at Socket.emit (node:events:390:28) at addChunk (node:internal/streams/readable:324:12) Vite Error, /node_modules/.vite/deps/svelte.js?v=093c0ec4 optimized info should be defined Vite Error, /node_modules/.vite/deps/svelte_store.js?v=093c0ec4 optimized info should be defined Vite Error, /node_modules/.vite/deps/svelte_internal.js?v=093c0ec4 optimized info should be defined Vite Error, /node_modules/.vite/deps/svelte.js?v=093c0ec4 optimized info should be defined Vite Error, /node_modules/.vite/deps/svelte_internal.js?v=093c0ec4 optimized info should be defined Vite Error, /node_modules/.vite/deps/svelte_internal.js?v=093c0ec4 optimized info should be defined (x2)

blocknative / web3-onboard

Svelte App build error #667