Webpack-dev-server: self.postMessage is not a function under webpack-dev-server

[didi0613]

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

Bug

What is the current behavior?


Self is referring to a wrong object serviceworkerglobalscope instead of window.
PostMessage is not defined under serviceworkerglobalscope

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

Clone https://github.com/didi0613/electrode/tree/webpack-2.0
checkout branch webpack-2.0
npm i && npm run bootstrap
goto samples/universal-react-node app
npm install
gulp dev

What is the expected behavior?
There should be no error and pwa should work

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention your webpack and Operating System version.
webpack 2.2.0
wepack-dev-server 2.2.0
os: mac

[dangerousdan]

Related to #745

[shellscape]

Should be resolved in #813 and v2.7.1. If it's not, please ping me and we'll reopen.

[ddomonkos]

Hi @shellscape, I still have the error in v2.7.1. Do you have any tips how to fix this?

Let me know if you need more info about the error.

[shellscape]

Unfortunately I don't. We've had a few PRs related to this and I'm unable to reproduce the issue in any of our tests. If this is still occurring there's a better than average chance that it's your configuration or environment causing it. Sidenote: If you're not on webpack@3 yet, it's time to upgrade.

[ddomonkos]

Ok thank you, I'll try to debug it some more, maybe I find something.

Btw I am using the newest webpack already.

[codelinguist]

I also had this exact issue in my angular 4 app today
This occurs when i call a function that opens a WebSocket connection and sends message when the app initializes.
I thought there's some contention happening so i moved the function call inside setTimeout with 100ms delay to give time for the webpack dev server to initialize. The error is gone!

I hope this helps.

[DustinArmstrong]

Sorry for bringing this thread back to life, but I've been dealing with this problem for a few days now on Webpack 3, and think I've narrowed it down to at least one possible solution for anyone having problems.

In my Vue project I was submitting Ajax requests from a component. In order to maintain access to update data tied to this further up in my component I used self = this to pass to my function. I missed the var definition in my markup, and Webpack's self.postMessage was trying to access my Vue data instead.

No errors were presented on compilation since self was already defined as a variable in Webpack.

[shellscape]

@DustinArmstrong that may be something the main webpack project can assist with - perhaps a console warning or some such.

[YDJSZY]

I have also this problem, I don't know how to do ...

[devilsbibble]

Do you have set window.self=xxx ? Delete it .

[ereztdev]

just don't use self, use that = this, or any other var that would not be self

[imam]

If you want to use self anywhere in your code, make sure you always redefined self at the very last line of everything (window.self = window)

[asrofie]

I have same issue, I fixed it with finding self variable and make sure it redefined (using let keyword, e.g let self = this).

[martinsJoseph007]

Sorry for bringing this thread back to life, but I've been dealing with this problem for a few days now on Webpack 3, and think I've narrowed it down to at least one possible solution for anyone having problems.

In my Vue project I was submitting Ajax requests from a component. In order to maintain access to update data tied to this further up in my component I used self = this to pass to my function. I missed the var definition in my markup, and Webpack's self.postMessage was trying to access my Vue data instead.

No errors were presented on compilation since self was already defined as a variable in Webpack.

You are a genius.