DOMException: Failed to execute 'postMessage' on 'BroadcastChannel'

Question

DOMException: Failed to execute 'postMessage' on 'BroadcastChannel'

Closed this issue 5 years ago · 18 comments

I get this on my console after installing this package. The package seems to be working though. Any ideas?

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'BroadcastChannel': function register(key) {
    _pStore.dispatch({
      type: _constants__WEBPACK_IMPORTED_MODULE_1__["REGISTER"]...<omitted>... } could not be cloned.
    at Object.postMessage (http://localhost:1962/main.js?486b1c6adc86eae78860:46721:19)
    at http://localhost:1962/main.js?486b1c6adc86eae78860:46027:36
postMessage @ native.js:25
(anonymous) @ index.js:163
Promise.then (async)
_post @ index.js:162
postMessage @ index.js:91
(anonymous) @ syncState.js:150
persist @ persistStore.js:114
persistStore @ persistStore.js:123
(anonymous) @ index.tsx:37
setInterval (async)
SocialAuthButtons.login @ index.tsx:33
SocialAuthButtons._this.showFacebook @ index.tsx:57
callback @ ext.js:8890
doTap @ ext.js:62143
(anonymous) @ ext.js:13989
fire @ ext.js:13858
doFireEvent @ ext.js:14283
doFireEvent @ ext.js:24961
prototype.doFireEvent @ ext.js:30073
fireEventArgs @ ext.js:14224
fireAction @ ext.js:14235
onTap @ ext.js:62130
onClick @ ext.js:62125
fire @ ext.js:13858
fire @ ext.js:19527
publish @ ext.js:19492
publishDelegatedDomEvent @ ext.js:19508
doDelegatedEvent @ ext.js:19546
onDelegatedEvent @ ext.js:19535

Answer 1 · 2019-11-13T15:00:58.000Z

I just installed it this morning and am seeing the same error in the dev tools console.

Answer 2 · 2019-11-13T15:15:14.000Z

This could be related to BroadcastChannel, let me investigate this once I got time. I will try to upgrade BroadcastChannel first.

Answer 3 · 2019-11-13T15:28:32.000Z

I upgraded BroadcastChannel. no errors are thrown from the latest Chrome. Please help to verify or provide the details about your browser. Thanks

Answer 4 · 2019-11-13T15:52:14.000Z

Does that mean you updated your library and I should pull it down to get the dependency update and re-test? If so, I'll be happy to pull down the update and see if the error goes away.

Answer 5 · 2019-11-13T15:56:47.000Z

Just released v2.0.5, you can try upgrading redux-state-sync to this version. Thanks!

Answer 6 · 2019-11-13T18:53:19.000Z

I've tried to install 2.0.5 but npm doesn't see it. I tried uninstalling and reinstalling, npm update, and npm i @2.0.5 and it says 2.0.5 doesn't exist? I'm stuck on 2.0.4

Answer 7 · 2019-12-19T11:15:22.000Z

Hi, any updates on this? thanks

Answer 8 · 2019-12-19T16:32:40.000Z

Hi, any updates on this? thanks

Do you still facing this issue after install the new version?

Answer 9 · 2019-12-19T16:38:10.000Z

Hi, any updates on this? thanks

Do you still facing this issue after install the new version?

I'm on 3.0.0, that's the last one right?

Answer 10 · 2019-12-27T09:48:40.000Z

Hi, any updates on this? thanks

Do you still facing this issue after install the new version?

I'm on 3.0.0, that's the last one right?

Which browser doesn't work? Does the example work for you?

Answer 11 · 2020-01-01T08:48:42.000Z

in latest version 3, i am seeing a bit delay in mobile browsers. will the broadcast channel available to mobile browsers.

Answer 12 · 2020-01-01T17:16:56.000Z

in latest version 3, i am seeing a bit delay in mobile browsers. will the broadcast channel available to mobile browsers.

https://caniuse.com/#search=BroadcastChannel, if not supported it will fall back to localstorage. please refer to broadcast channel's doc for details

Answer 13 · 2020-01-02T08:12:42.000Z

Hi, any updates on this? thanks

Do you still facing this issue after install the new version?

I'm on 3.0.0, that's the last one right?

Which browser doesn't work? Does the example work for you?

I'm using Chrome, Version 79.0.3945.79 (Build officiel) (64 bits).
The example works and I noticed that it worked for me too if I setup a whitelist and not synchronize all actions. I don't understand why :/

Answer 14 · 2020-01-02T08:53:30.000Z

Hi, any updates on this? thanks

Do you still facing this issue after install the new version?

I'm on 3.0.0, that's the last one right?

Which browser doesn't work? Does the example work for you?

I'm using Chrome, Version 79.0.3945.79 (Build officiel) (64 bits).
The example works and I noticed that it worked for me too if I setup a whitelist and not synchronize all actions. I don't understand why :/

I think maybe one of your actions has function as the payload. Make sure your data is serializable. hope it helps.

Answer 15 · 2020-01-02T08:55:47.000Z

Hi, any updates on this? thanks

Do you still facing this issue after install the new version?

I'm on 3.0.0, that's the last one right?

Which browser doesn't work? Does the example work for you?

I'm using Chrome, Version 79.0.3945.79 (Build officiel) (64 bits).
The example works and I noticed that it worked for me too if I setup a whitelist and not synchronize all actions. I don't understand why :/

I think maybe one of your actions has function as the payload. Make sure your data is serializable. hope it helps.

Ok that must be something like that!
Feel free to close this issue then.

Thanks for your help!

Answer 16 · 2022-11-21T12:18:21.000Z

I am still facing this issue.

Chrome Version: 107.0.5304.107
redux-state-sync: 3.1.4

Answer 17 · 2023-02-04T09:02:30.000Z

The redux state sync across tabs works but still getting a similar error message on console which was outright made me think the integration didn't work

Project Config
"react": "^17.0.2",
"@reduxjs/toolkit": "^1.8.5",
"react-redux": "^8.0.2",
"redux-persist": "^6.0.0",
"redux-state-sync": "^3.1.4",

Chrome Version 109.0.5414.119 (Official Build) (arm64)

Error Message on Console.

Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'BroadcastChannel': function register(key) {
    _pStore.dispatch({
      type: _constants__WEBPACK_IMPORTED_MODULE_0__.REGISTER,
 ...<omitted>... } could not be cloned.
    at Object.postMessage (https://localhost:3000/static/js/bundle.js:81043:21)
    at https://localhost:3000/static/js/bundle.js:79996:47
postMessage @ native.js:26
(anonymous) @ broadcast-channel.js:181
Promise.then (async)
(anonymous) @ broadcast-channel.js:185
Promise.then (async)
_post @ broadcast-channel.js:180
postMessage @ broadcast-channel.js:93
(anonymous) @ syncState.js:160
(anonymous) @ index.js:20
(anonymous) @ immutableStateInvariantMiddleware.ts:253
dispatch @ VM315:1
persist @ persistStore.js:114
persistStore @ persistStore.js:123
./src/store/index.js @ index.js:41
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/index.js @ useLogOut.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
native.js:26 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'BroadcastChannel': function register(key) {
    _pStore.dispatch({
      type: _constants__WEBPACK_IMPORTED_MODULE_0__.REGISTER,
 ...<omitted>... } could not be cloned.
    at Object.postMessage (https://localhost:3000/static/js/bundle.js:81043:21)
    at https://localhost:3000/static/js/bundle.js:79996:47

Answer 18 · 2023-07-16T16:43:42.000Z

This fixed it for me.
#53 (comment)