[Bug]: Account Center Options cannot be specified

[d4mr]

Current Behavior

If accountCenter options are passed to the init method of Onboard, then the following error occurs with calling connect:

Also, a new undocumented required property has been added to the AccountCenter type called containerElement, and this might have something to do with the error.

Expected Behavior

Configuration options for AccountCenter should not cause errors. Additionally, the containerElement property should not be required if the account center is disabled, and the property should be further documented.

Steps To Reproduce

1. Pass any accountCenter options as part of the init method to Onboard.
2. Try to connect

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Runtime

Package Version

2.5.0

Node Version

16.5.1

What browsers are you seeing the problem on?

Chrome

Relevant log output

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertRule')
    at create_rule (index.js:1280:1)
    at go (index.js:1568:1)
    at Object.start (index.js:1605:1)
    at index.js:4962:1
    at flush (index.js:1479:1)
create_rule @ index.js:1280
go @ index.js:1568
start @ index.js:1605
(anonymous) @ index.js:4962
flush @ index.js:1479
Promise.then (async)
schedule_update @ index.js:1426
make_dirty @ index.js:1996
(anonymous) @ index.js:2033
(anonymous) @ index.js:11997
ConsumerObserver.next @ Subscriber.ts:161
Subscriber._next @ Subscriber.ts:119
Subscriber.next @ Subscriber.ts:75
(anonymous) @ Subject.ts:68
errorContext @ errorContext.ts:29
Subject.next @ Subject.ts:61
ReplaySubject.next @ ReplaySubject.ts:65
next @ share.ts:226
ConsumerObserver.next @ Subscriber.ts:161
Subscriber._next @ Subscriber.ts:119
Subscriber.next @ Subscriber.ts:75
(anonymous) @ mergeInternals.ts:85
OperatorSubscriber._this._next @ OperatorSubscriber.ts:70
Subscriber.next @ Subscriber.ts:75
(anonymous) @ filter.ts:72
OperatorSubscriber._this._next @ OperatorSubscriber.ts:70
Subscriber.next @ Subscriber.ts:75
(anonymous) @ map.ts:58
OperatorSubscriber._this._next @ OperatorSubscriber.ts:70
Subscriber.next @ Subscriber.ts:75
(anonymous) @ distinctUntilChanged.ts:173
OperatorSubscriber._this._next @ OperatorSubscriber.ts:70
Subscriber.next @ Subscriber.ts:75
(anonymous) @ Subject.ts:68
errorContext @ errorContext.ts:29
Subject.next @ Subject.ts:61
dispatch$1 @ index.js:479
setWalletModules @ index.js:933
connect$1 @ index.js:2151
(anonymous) @ index.js:36
onClick @ WalletButton.tsx:34
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430






Uncaught TypeError: Cannot read properties of null (reading 'cssRules')
    at index.js:1307:1
    at Map.forEach (<anonymous>)
    at index.js:1305:1
(anonymous)	@	index.js:1307
(anonymous)	@	index.js:1305
requestAnimationFrame (async)		
raf	@	index.js:1074
clear_rules	@	index.js:1302
delete_rule	@	index.js:1297
cleanup	@	index.js:1563
(anonymous)	@	index.js:1582
(anonymous)	@	index.js:1079
run_tasks	@	index.js:1078
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
run_tasks	@	index.js:1084
requestAnimationFrame (async)		
raf	@	index.js:1074
loop	@	index.js:1093
go	@	index.js:1577
start	@	index.js:1605
(anonymous)	@	index.js:4962
flush	@	index.js:1479
update	@	index.js:1820
(anonymous)	@	index.js:1827
Promise.then (async)		
handle_promise	@	index.js:1825
create_else_block$7	@	index.js:3467
create_fragment$q	@	index.js:3692
init$1	@	index.js:2043
WalletAppBadge	@	index.js:3901
create_fragment$k	@	index.js:4877
init$1	@	index.js:2043
WalletButton	@	index.js:5005
create_each_block$4	@	index.js:5118
create_fragment$j	@	index.js:5171
init$1	@	index.js:2043
SelectingWallet	@	index.js:5317
create_if_block_4$2	@	index.js:5903
create_if_block_3$3	@	index.js:5796
create_default_slot$3	@	index.js:6080
create_slot	@	index.js:1023
create_fragment$t	@	index.js:2907
init$1	@	index.js:2043
Modal	@	index.js:3044
create_if_block$b	@	index.js:5707
create_fragment$h	@	index.js:6274
init$1	@	index.js:2043
Index$3	@	index.js:6609
create_if_block_8	@	index.js:11231
p	@	index.js:11811
update	@	index.js:1497
flush	@	index.js:1464

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.

[mahmud-bn]

Hi @d4mr, I followed your steps to reproduce with core 2.5.0 on a new CRA app and couldn't replicate the issue.

Can you provide more details, like your Onboard init options setup, that you feel might help?

[d4mr]

Hi @d4mr, I followed your steps to reproduce with core 2.5.0 on a new CRA app and couldn't replicate the issue.

Can you provide more details, like your Onboard init options setup, that you feel might help?

here is a sandbox where you can see the error: https://codesandbox.io/s/web3-onboard-broken-demo-ygzm97

[mahmud-bn]

Hi @d4mr, thanks for the sandbox. So the error disappeared when I made containerElement optional in the dist folder. A fix for this is already in the works and will be available in the next release. In the meantime, core's version 2.3.2 has no containerElement feature.

I will notify you as soon as the fix has been released.

Thanks.

[ashish-pcode]

Can we pls make this push quick?

[Adamj1232]

@ashish-pcode PR to fix this issue : #1166
Documentation and README are also updated