Webpack-encore: dev-server default port is not added any more

[bravik]

This week something did updated, and I have Cross-Origin request errors for GET /sockjs-node/info requests flooding the console and preventing auto-reloading on changes.

I have in package.json:
"start": "encore dev-server --disableHostCheck",
and commit this file to repository, so I could easily start dev-server with npm start on any deployment and not specify particular host. But obviously --disableHostCheck flag doesn't work anymore.

Furthermore, when I add --host myhost.loc
GET /sockjs-node/info
return 404 errors.

[Kocal]

I'm not sure arguments can be passed in camel case, normally we pass --disable-host-check.

See more at https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck

[bravik]

Oh, I've noticed that on another project, where I yet not updated dependencies such requests are fired:
http://localhost:8080/sockjs-node/info?t=1555305759521
and on updated:
http://localhost/ru/sockjs-node/info?t=1555305986261
Without port.
Before it always added the correct default port automatically.
Now if I add --port 8080 it all works again.

[Lyrkan]

Hi @bravik,

I did a quick test and it seems to work fine with the latest version of Encore and its dependencies:

| Command | URL |
|--------------------------------------------------|--------------------------------------------------------------------------------------------------------------|
| yarn encore dev-server | |
| yarn encore dev-server --host dev.local | |
| encore dev-server --host dev.local --port 9090 | |

Wouldn't you happen to have something in your webpack.config.js that could be the cause of the issue?

[ondrajonas]

Hey @Lyrkan I have same problem. I just updated the package to version 0.27.0 and got error with sockjs. At the moment we use command like this:
encore dev-server --host 0.0.0.0 --port 41781 --disable-host-check --hot

All assets are server with right port and works:
<link rel="stylesheet" href="http://0.0.0.0:41781/build/grid.css">

But sockjs is served with host and port like this:
http://localhost:41700/sockjs-node/info?t=1555323988872

Any idea why?

[ondrajonas]

@Lyrkan Also tried to locate the URL and under http://localhost:41781/sockjs-node/info?t=1555326602938 is sockjs available. So there is problem with assigning the right port. It uses 41700 instead of 41781. And I can't see why...

[bravik]

@Lyrkan nothing special. Actually I've done no changes to webpack.config.js at all. Just npm update for encore 0.27.
However the same thing happen after npm update with encore 0.26.
So it might not be something with encore, but some dependency.

[ondrajonas]

@Lyrkan, @bravik yep same for me. Probably problem with webpack dev-server and port assigning?

[ondrajonas]

@Lyrkan okay si I reverted webpack-dev-server to version 3.2.0 and everything works now. So it's problem on their side.. :/ They should fix handling with sockjs port. Or is there any other configuration what we need to set?

It's in here: https://github.com/webpack/webpack-dev-server/issues/1777

[Lyrkan]

Oh, so that only happens when you are retrieving assets from the dev-server in a page that isn't handled by it? That would explain why I didn't see the issue during my previous test :)

Not much we can do on our side then (except maybe pinning the webpack-dev-server version to <3.3), but it'll probably be fixed quite soon anyway.

In the meantime, if you are using Yarn you can add a resolutions entry to your package.json in order to force it to use 3.2: https://yarnpkg.com/lang/en/docs/selective-version-resolutions/#toc-how-to-use-it

[ondrajonas]

Yep, I installed specific version 3.2.0 on webpack-dev-server and it works now. So I think we can close this issue coz it's not a problem of encore. :)

[Lyrkan]

@bravik Does it also solve your issue?

[bravik]

@Lyrkan I've just added specific --port and it works for now.

[zhangyuang]

if you add --port
the sockjs port will use port
if you don't add
the sockjs port will use location.port
but now, you can use --sockPort to use the correct port
look this pr

[aarongerig]

Seems to be an open issue on webpack-dev-server's end: https://github.com/webpack/webpack-dev-server/issues/1796

[Lyrkan]

@aarongerig Doesn't seem to be the same issue to me.

As pointed by @ondrajonas it was most likely related to https://github.com/webpack/webpack-dev-server/issues/1777 which should be fixed in the next version of webpack-dev-server.

[lambertbeekhuis]

Hey @Lyrkan, had the same problem when using Vue/Hot Module Reloading using version 0.27.: (CORS Access-Control-Allow-Origin)

Thanks to your comments solved it with running:
yarn encore dev-server --port 8080 --disable-host-check --hot

or easier by adding the port and disable-host-check in package.json:
"dev-server": "encore dev-server --port 8080 --disable-host-check"
Now I can use the normal yarn dev-server --hot command again.

Thanks!

[ElonLotfi]

had the same problem ,
GET https://localhost:8700/sockjs-node/info?t=1585333912786 net::ERR_SSL_PROTOCOL_ERROR

[chapterjason]

Using --https and https://github.com/symfony/symfony-docs/pull/13746/files fixes the net::ERR_SSL_PROTOCOL_ERROR error for me.