Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

use with Sapper?

See original GitHub issue

I am having a hard time using this cool lib with Sapper

Here is the error I am getting when I try to import the lib

> sapper dev --ext '.svelte .svx'

✗ client
Assigning to rvalue (Note that you need plugins to import files that are not JavaScript)
43060: 
43061: process.title = 'browser';
43062: process.browser = true;
       ^
43063: process.env = {};
43064: process.argv = [];
• server
✔ service worker (114ms)
.../todo-app/srv/node_modules/svelte-web3/dist/index.js:68538
          _btoa = btoa.bind(window);
          ^

ReferenceError: btoa is not defined
    at Object.<anonymous> (.../todo-app/srv/node_modules/svelte-web3/dist/index.js:68538:4)
    at Object.439._process (.../todo-app/srv/node_modules/svelte-web3/dist/index.js:68550:5)
    at o (.../todo-app/srv/node_modules/svelte-web3/dist/index.js:28:337)
    at .../todo-app/srv/node_modules/svelte-web3/dist/index.js:28:388
    at Object.440../helpers.js (.../todo-app/srv/node_modules/svelte-web3/dist/index.js:68556:16)
    at o (.../todo-app/srv/node_modules/svelte-web3/dist/index.js:28:337)
    at .../todo-app/srv/node_modules/svelte-web3/dist/index.js:28:388
    at Object.415../batch.js (.../todo-app/srv/node_modules/svelte-web3/dist/index.js:62131:23)
    at o (.../todo-app/srv/node_modules/svelte-web3/dist/index.js:28:337)
    at .../todo-app/srv/node_modules/svelte-web3/dist/index.js:28:388

btoa is a browser-only function so I tried sth else by making it client side only i .e SSR compatible but no luck there too

Here is the code I used

onMount( async () => {
	const svelteWeb3 = await import('svelte-web3');
	const { ethStore, web3, selectedAccount, connected } = svelteWeb3

but then the way the $web3 store is initiatied creates a conflict.

npm run dev                                                                                                                                                                                          130 ↵

> TODO@0.0.1 dev .../todo-app/srv
> sapper dev --ext '.svelte .svx'

✗ server
.../todo-app/srv/src/components/Nft.svelte
Stores must be declared at the top level of the component (this may change in a future version of Svelte)
71:   // getAccount
72:   address = get(selectedAccount)
73:   contract = new $web3.eth.Contract(abi, 0x, {
                     ^
74:         from: address
75:     })
✗ client
.../todo-app/srv/src/components/Nft.svelte
Stores must be declared at the top level of the component (this may change in a future version of Svelte)
71:   // getAccount
72:   address = get(selectedAccount)
73:   contract = new $web3.eth.Contract(abi, 0x, {
                     ^
74:         from: address
75:     })
internal/modules/cjs/loader.js:1032
  throw err;
  ^

Error: Cannot find module '.../todo-app/srv/__sapper__/dev/server/server.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)
    at Function.Module._load (internal/modules/cjs/loader.js:898:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
> Server crashed

Any idea or pointer about how this could be solved?

Many thanks for the lib