Webpack-dev-server: Second argument of postMessage is not a transfert list

[cecilemuller]

Do you want to request a feature or report a bug?

A bug.

What is the current behavior?

There is an error (only in webpack-dev-server, not in regular webpack builds) in the console when there is a target "webworker".

Chrome error:

Uncaught TypeError: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': The 2nd argument is neither an array, nor does it have indexed properties.

Firefox error:

TypeError: Argument 2 of DedicatedWorkerGlobalScope.postMessage can't be converted to a sequence.

If the current behavior is a bug, please provide the steps to reproduce.

Testcase to reproduce it: https://github.com/wildpeaks/issue-webpack-dev-server-postmessage

They seem to point to this line as it appears "*" is not a valid transfert list.

What is the expected behavior?

The expected behavior is no error shown in the console.

Please mention your webpack and Operating System version.

• Node 7.4.0
• Windows 10
• Webpack 2.2.0-rc.7
• Webpack-dev-server 2.2.0-rc.0

[SpaceK33z]

Thanks for your bugreport and repo. Would you be interested in making a PR to fix this? It's perhaps useful to add your repo to our examples/ folder (with a few modifications to make it work like the other examples).

[jbms]

I'm actually unclear on what is intended from that code. What is the purpose of sendMsg? Is it intended to have an effect only within a webworker, specifically to send a message to the main thread that created it? That seems like a bad idea, since it will confuse application code that is using that communication channel.

[cecilemuller]

Sorry I missed your reply @SpaceK33z and sure, I will prepare a PR to add to the examples.

As for solving the issue however, I'm not familiar with the internals of dev server itself, so I'm not yet sure what side-effects changing it might have.

[jakobkylberg]

We ran into the same issue in our application. When we run the application using webpack-dev-server we see the issue and when using another server we have no issues.

The example given by cecilemuller describes well what we were trying to do, we have a similar simple web worker in our application.

We are using:
webpack-dev-server 2.2.1
webpack 2.2.1

It would be great to find a solution to this problem.

[jakobkylberg]

If I remove the "*" parameter from the line that @cecilemuller suspects is the culprit, our webworker works without issues. However, another error is reported in the console: TypeError: Not enough arguments to Window.postMessage. Maybe something that the commit that introduced this issue tried to fix? The problematic call was introduced in this commit.

[dangerousdan]

This seems to be caused by having the web worker as an entry point in webpack, as window.postMessage and worker.postMessage expect different arguments.

This was originally added in #632.

Changing if(typeof self !== "undefined") { to if(typeof window !== "undefined") { fixes the immediate issue but this still leaves us with web worker hot reloading not working, as any web worker updates produces the error [HMR] Update failed: ReferenceError: document is not defined.

[hccde]

I've found out how this bug is happening,it's not easy,this is becausewe use iframe.postMessage to communicate with other window (refresh).But unfortunately, in the Worker there is also a method called postMessage ,that's self.postMessage .When ' worker.js' as an entry in 'webpack.config.js',usually we have to do that,'worker.js' will be packaged with 'webpack-dev-server/client',As previously mentioned，we use 'iframe.postMessage' to refresh，in code,that's:
if(typeof self !== "undefined") { // broadcast update to window self.postMessage("webpackHotUpdate" + currentHash, "*"); }
'worker.js' which is packaged with 'webpack-dev-server/client' also contains this code, pay attention, at this time, self is not window but [DedicatedWorkerGlobalScope](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage),this is the key point. 'webworker' is in a special context different from 'window'.so we need to distinguish between these two objects.And i have initiated a 'pr' to fix this. #813

[SpaceK33z]

Fixed by #813.

[SEAPUNK]

I don't think #813 solved the issue, because we're getting the same error even with the patch included.

[opavader]

@SEAPUNK a temporary workaround for typescript is to reassign the postMessage method to another and use that. e.g. below

const sendMessage: any = self.postMessage;

onmessage = function(this: Window, data: MessageEvent)  {
    console.log(data);
    sendMessage('got it!');
};

[hccde]

@SEAPUNK hi, if you are sure this patch has been included and the bug is not solved, can you give us an example.you can also test it by using #755 .i think i need more information.

[mohyeid]

@hccde Thump up tp @SEAPUNK for the workaround, but yes absolutley its not working. It might be a typescript issue. I am not sure yet if its a web-pack issue, but to repro I used the below example and ran it in Angular project, which is using web-pack and it failed with the same issue
https://github.com/zlepper/typescript-webworker