Unable to use webpack dev server on IE11.

[BlakeB415]

What is the current behaviour?
The page fails to load when using the webpack dev server on IE11.

Steps to Reproduce

1. Create a base Preact-CLI project.
2. Start dev server using npm run dev.
3. Try to access the page on IE11.

What is the expected behaviour?
It should work on IE11 for debugging.

Please mention any other relevant information
This is the error I get.

Environment Info:
System:
OS: Windows 10 10.0.19042
CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
Binaries:
Node: 12.18.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.423.0), Chromium (89.0.774.76)
npmPackages:
preact: ^10.3.2 => 10.5.13
preact-cli: ^3.0.0 => 3.0.5
preact-render-to-string: ^5.1.4 => 5.1.19
preact-router: ^3.2.1 => 3.2.1

[ForsakenHarmony]

Do you know if this is a problem with preact-cli or webpack in general?

[BlakeB415]

Do you know if this is a problem with preact-cli or webpack in general?

I'm unsure. The webpack dev server works in IE in other CLI tools for other frameworks. Just this one, in particular, doesn't. Most of the issues I'm reading issues on the webpack-dev-server repository and they say that the issue with IE was resolved.

[rschristian]

@BlakeB415 Any idea in which version the issue was resolved? Or have a link? Might just need to do a version bump

[BlakeB415]

@BlakeB415 Any idea in which version the issue was resolved? Or have a link? Might just need to do a version bump

The issues were fairly old. It was fixed in version 3.10.1.

[BlakeB415]

I've found that the URL parser in webpack-dev-server/client/utils/createSocketUrl.js:16 does not return the correct parsed output to the urlParts variable with IE.

?http://192.168.1.75:8080&sockPath=/sockjs-node
should return
{"protocol":"http:","slashes":true,"auth":null,"host":"192.168.1.75:8080","port":"8080","hostname":"192.168.1.75","hash":null,"search":"?sockPath=/sockjs-node","query":{"sockPath":"/sockjs-node"},"pathname":"/","path":"/?sockPath=/sockjs-node","href":"http://192.168.1.75:8080/?sockPath=/sockjs-node"}
but instead returns
{"protocol":"","href":""}

Setting this value manually in that file fixes the issue. Though I have no idea what's causing the parser to break. 🤔

This same version of webpack-dev-server works perfectly fine with other frameworks on IE. Does it have something to do with some configuration value? Maybe it needs to be transpiled? I have no idea.

[BlakeB415]

webpack/webpack-dev-server#2439
This could be a possible solution.

[rschristian]

We seem to be following the provided instructions in the link as of #1646, so I'm going to close this out in the hopes it's been fixed.