[Bug]: Error: At least one chain must be set before attempting to connect a wallet

[sgehrman]

Current Behavior

getting this on hot reload in a react app

Error: At least one chain must be set before attempting to connect a wallet

It works when I reload the page ok, just hot reload fails

Expected Behavior

shouldn't happen

Steps To Reproduce

use a react app and change code and save to hotreload

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Runtime

Package Version

2.6.0

Node Version

16

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[Adamj1232]

@sgehrman can you share your code base so we can reproduce?

[Adamj1232]

@sgehrman would also be good to note, if you are using within a react project we have a React Hooks package that would make your implementation and usage more simple - https://www.npmjs.com/package/@web3-onboard/react

[sgehrman]

I'm using the react hooks. I'm also on NextJS if that matters.
Can't easily share the code.

[sgehrman]

on hot reload, chains is [], on a normal load it has chains

[sgehrman]

hot reload calls init again with the same params, but the result has [] for chains

export const init = (options) => {
web3Onboard = Web3Onboard(options);

web3Onboard.state.get().chains == [] second call on hot reload.

return web3Onboard;

[sgehrman]

Looking at your code now, but it's so hipster and cool, I can't make any sense of it.

dispatch, svelte, actions, rxjs, yarn, rollup? Too much complexity. It's probably failing in there somewhere. Why not write normal code that works rather than this hipster fad overly engineered code?

[sgehrman]

Also, I'm unable to step though your code in Chrome. No idea why, it won't auto format and it's all one line. Build you code so it's normal code that is debuggable.

[sgehrman]

trying this:

export const setupOnboard = () => {
  // hack for hot reload
  const existing = web3Onboard?.state.get();
  if (existing && existing?.chains?.length > 0) {
    console.log('init bypassed');
    return;
  }

  init({ params... })
}

but that has a side effect:

MetaMask - RPC Error: The method "eth_selectAccounts" does not exist / is not available. {code: -32601, message: 'The method "eth_selectAccounts" does not exist / is not available.', data: {…}}

So, it almost works. Let me know if that gives you a clue.

[taylorjdawson]

@sgehrman There's a lot here, let's focus this issue a little bit. To restate: The issue is with hot reloading and seeing the "At least one chain..." message?
If that is the case I have seen this behaviour before however, it seems like with the latest versions of the packages it has been resolved.
Can you try reproducing the issue using this demo?

[taylorjdawson]

As a side note: Let's make sure comments about the code are constructive. Comments like "so hipster and cool" or "Build you code so it's normal code that is debuggable" are very vague. Let's practice good OSS etiquette and if you see where there could be an improvement please let us know but using more helpful comments, thank you!