Comments (10)
Thank you for clarifying. I'm unable to reproduce the problem in a standalone project (it works there).
I believe this is some underlying angular configuration on my side. Let's close the issue and I will respond when I find a solution.
from comlink.
Iβm not sure why the error is looking like that for you. When I run your code (without the Angular bits), I get an error that what I am calling with new
is not a constructor, which is correct! You are exposing an object from the worker, that contains the class. So you need to access that constructor when calling new
:
- const worker = await new GenerateDataWokrer();
+ const worker = await new GenerateDataWokrer.GenerateData();
from comlink.
Hey I continue getting
Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Worker': Symbol(Symbol.toPrimitive) could not be cloned.
Do you happen to have a working angular example with comlink? I have found only the one I've mentioned earlier.
from comlink.
Can you host your code on a Glitch? This seems to be Angular-specific.
from comlink.
I can't share my current project sadly. I will show the other project ( which will most probably work) in Glitch soon.
I kind of wanted to understand what does the error mean so I know what I'm looking for as I debug.
from comlink.
The error implies that the message payload contains an object with Symbol.toPrimitive
in it. Symbols are not structured cloneable, so sending the message to the worker fails.
Function parameters and return values are part of the message, so thatβs usually where the cause lies. From your example, you are only sending strings, so those should be fine. My guess is that Angular is injecting the symbol somewhere for some reason. But I am out of my depth there.
from comlink.
I encountered this same message (Symbol(Symbol.toPrimitive) could not be cloned
) while using comlink, with the interesting finding that it seems to be triggered by placing a 'debugger' statement soon before the postMessage. Aggravating. π
Removing the debugger statement removes the symptom (it's sometimes replaced by a different error [with its own separable cause] that can make troubleshooting confusing).
Searching the interwebs for that message leads to a Googlewhack on this ticket.
Lacking any further evidence, I'm thinking Chrome devtools might be adding this symbol as an implicit flag, maybe as part of its "Scope" panel? Maybe this can help with reproduction.
... and now I got further evidence.
In the case I have in hand right now:
[service worker]
comlink.expose(new SomeThing());
[DOM thread]
const proxy = comlink.proxy(pipe1)
proxy.someMethod(someValue)
the someMethod() being called was returning this
(the expose()'d object, an instance of an ES6 class, transpiled with Babel 7.1). I think that's generally matching descriptions above.
In the DOM thread, here's a stack trace goes with the error message.
comlink.js:250 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'MessagePort': Symbol(Symbol.toPrimitive) could not be cloned.
at eval (webpack:///./node_modules/comlink/comlink.js?:250:18)
at new Promise (<anonymous>)
at pingPongMessage (webpack:///./node_modules/comlink/comlink.js?:241:12)
at eval (webpack:///./node_modules/comlink/comlink.js?:69:32)
at Object.apply (webpack:///./node_modules/comlink/comlink.js?:267:20)
at eval (webpack:///./src/helpers/MyStuff.js?:45:9)
^^^ ONLY when debugger
is used right before the call to proxy.doSomething(someArg).
In the service worker, this error is thrown (either with or without debugger
) - simply a result of trying to return this
.
comlink.js:124 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'MessagePort': function () { [native code] } could not be cloned.
at MessagePort.eval (webpack:///./node_modules/comlink/comlink.js?:124:25)
I checked to see whether the error at 250 was possibly being thrown from the worker, by adding logging in 2 catch() handlers in comlink.js. Nope.
That leads me back to the devtools theory. I traded out someArg for {}
, a new object that devtools shouldn't be able to see. Same results. I looked at the proxy for someMethod, didn't locate any toPrimitive in it. Now I'm stumped for sure.
Of course, removing return this
is fixing my current problem.
from comlink.
Note: after fixing my real problem, the debugger
statement continues to cause the error to be thrown, yet the service worker does certainly receive the message...
from comlink.
are you using Angular 6? for me it worked after migrating to 7.
from comlink.
No, it's a React app, plain javascript through comlink for some share with >1 browser tabs.
from comlink.
Related Issues (20)
- Missing types for `Comlink.finalizer` props on objects. HOT 4
- Possible to get reference to original object from a proxy? HOT 2
- Proxy not inferred as a promise when it's a nested inside a proxied object as a property value HOT 4
- Web Worker Hangs if Imported File Contains Top-Level `Await` HOT 6
- Service worker example: stops working when SW is suspended HOT 9
- Set operation is not awaitable HOT 2
- Possible to communicate between web workers? HOT 1
- How to transfer result buffers HOT 2
- [feat] DeasyncEndpoint HOT 2
- Move from Karma to Playwright? HOT 1
- Do I need to use transfer inside a proxy? HOT 1
- Add support for async transferHandle serializer/deserializer HOT 2
- Significant performance optimizations possible in `requestResponseMessage` HOT 4
- Push notifications from web worker HOT 5
- Memory leak when terminating worker with ongoing call HOT 2
- Worker Pool for similar tasks HOT 1
- Sharing constructed objects within a remote context
- How to implement comlink in Next.js 14 App Route
- Feature request: Automatic proxy of arguments HOT 3
- Having issues when using comlink with react (storing in react state) HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from comlink.