I’ve integrated the theme as instructed, but I’m getting these errors in the console. It doesn’t appear to be affecting the “watch” script as changes are taking place, but any thoughts on how I can fix this to keep it from flooding my console? I’m not too familiar w/ WebPack. Any direction is most appreciated. Thanks.
Thanks for the detailed information including relevant screenshots.
A similar issue has never been reported and it seems to be related to the webpack DevServer config. Here you can find all possible configuration settings: https://webpack.js.org/configuration/dev-server/
To fix it, I would start tinkering with the one’s related to “WebSocket”.
Maybe explicitly defining webSocketTransport ws works (https://webpack.js.org/configuration/dev-server/#websockettransport):
client: {
webSocketTransport: 'ws',
},
webSocketServer: 'ws',Alternatively you could try defining your webSocketURL (https://webpack.js.org/configuration/dev-server/#websocketurl):
client: {
webSocketURL: '{ADD YOUR LOCAL WS URL HERE}',
},Maybe unrelated, but I noticed that you’re using a wss:// protocol (= WebSocket SSL connection) which is unusual on localhost systems as you’d have to provide a valid SSL certificate.
Please let me know if any of this helped.
I’ve tried different combinations of the config settings, as well as your above recommendations without success.
You may be on to something regarding the SSL certificate. When inspecting in Safari, the console expresses an “An SSL error has occurred and a secure connections to the server cannot be made.” regarding the WebSocket connection – while in Chrome, it just says the connection failed seen in the OG screenshots.
I spun up another host following your instructions in case I missed anything:
Uploaded and activated the new theme in WordPress
“npm install” in the console
“npm run watch” to start webpack
The instance uses wss:// protocol to begin with without me changing anything. Is there a way to start using just the ws:// protocol and potentially avoiding that error?
I’m using MAMP Pro to spin up the WordPress instance, which installs an SSL certificate for the site, but not sure that has anything to do with the WebSocket SSL.
When disabling the SSL certificate for WordPress, the WebSocket errors resolve, but then I get I get “[webpack-dev-server] Invalid Host/Origin header” errors in both browsers.
According to Google webpack-dev-server invalid host/origin header the following resources may be helpful:
https://webpack.js.org/configuration/dev-server/#devserverallowedhosts
https://stackoverflow.com/questions/53906803/webpack-4-hot-reload-invalid-host-origin-header
https://stackoverflow.com/questions/69246770/webpack-5-disablehostcheck
https://github.com/webpack/webpack-dev-server/issues/1604
I’ve implemented the allowedHosts option and targeted my local.mopqc host, which removes the Invalid Host/Origin error, but now causes an infinite “App Updated. reloading…” loop. I haven’t found a solution when combing the web, so at this point I’m keen to just ignore it or switch starter themes altogether. I appreciate your help regardless, but this remains unresolved.
Sorry about that and good luck anyway.
Maybe the MAMP support team https://www.mamp.info/en/mamp-pro/support/ has experience in setting up a working webpack-dev-server config?
Otherwise you’d have to consult a webpack expert who could help you fix the infinite reloading issue. One last try: Try to add your IP address, incl./excl. the port, instead of your local URL (in your case probably via the webSocketURL configuration), as stated here: https://github.com/webpack/webpack-dev-server/issues/4232#issuecomment-1588507348
Leave a Reply