[Bug] Local development server broken

[ScottSmith95]

I'm noticing that fresh installs of React Static displays an empty page in develop mode ($ react-static start) and the console outputs SyntaxError: The URL 'http:/[http//localhost]:300' is invalid from SockJS. This occurs after running yarn upgrade in a previously working repo in either RS 6.3.x or 7.0.x. Seems that this is related to the 3.3.0 update of webpack-dev-server (possibly this change?).

Adding this to my project's package.json and reinstalling dependencies fixes development builds. This confirms that something is borked in an update of webpack-dev-server.

"resolutions": {
  "react-static/webpack-dev-server": "~3.1.10"
}

Environment

  System:
    OS: macOS 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-6287U CPU @ 3.10GHz
    Memory: 228.44 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 66.0.2
    Safari: 12.1
  npmPackages:
    react-ga: ^2.5.7 => 2.5.7 
    react-markdown: ^4.0.6 => 4.0.6 
    react-moment: ^0.8.4 => 0.8.4 
    react-static: ^7.0.7 => 7.0.7 
    react-static-plugin-reach-router: ^7.0.0 => 7.0.0 
    react-static-plugin-sitemap: ^7.0.0 => 7.0.0 
    react-static-plugin-source-filesystem: ^7.0.0 => 7.0.0

Steps to Reproduce the problem

1. npx react-static create
2. create site and cd in
3. yarn upgrade to install latest dependencies
4. yarn start
5. navigate to http://localhost:3000
6. See broken site? Open console.

[t0mclaudio]

I also experience the same problem

[cvpcasada]

This happens to me on projects within yarn workspaces / monorepo.

[Aykelith]

Same with npm

[rickyrombo]

Also experiencing this.

What appears to be happening is the hostname is being interpreted as the protocol, and the port as the hostname upon a hot reload - then the logic assumes the port wasn't set and tries again to load it, this time correctly getting 3000 (again). The module id passed into webpack is:
moduleId = "../../webpack-dev-server/client/index.js?localhost:3000" which gets parsed as:

host: "3000"
hostname: "3000"
href: "localhost:3000"
path: null
pathname: null
port: "3000"
protocol: "localhost:"

which then gets reformatted as:
"localhost:3000:3000/sockjs-node"

[tannerlinsley]

Not sure why this would be happening if we're constructing everything like so:

[kirklikecaptain]

I ran into this issue too (using npm). As a short term measure, I installed webpack-dev-server 3.2.1 as a dependency in my project's package.json, which seemed to fix it for now.

[tj]

I wonder if the webpack-dev-server is manipulating the config object passed, so devServer.host ends up having the port concatenated by the time you use it in that second snippet, just a guess haha definitely looks odd

[pedrofurtado]

Guys, read this PR, related to this bug: webpack/webpack-dev-server#1664

[bmagnantb]

this is caused by an updateCompiler call that was added to the Server.js constructor. webpack/webpack-dev-server#1664 is unrelated.

the config gets adjusted somehow in addEntries and createDomain gets called. createDomain uses http or https as the protocol without checking if host already contains the protocol. url.format ends up returning a bad url.

i tried changing host (currently http://localhost) in react-static getConfig. using localhost also ends up with a bad url. using //localhost fixes the url issue and the app renders along with a lot of 404s and websocket issues.

i don't have time at the moment to dig into a fix, but this seems like an issue for webpack-dev-server where the initial config isn't properly parsed when updateCompiler is called.

[bmagnantb]

forgot to add that removing the updateCompiler call in Server.js gets the server running again. it's the only call i was able to find, so there shouldn't be any other issues, but i haven't tested extensively.

[bmagnantb]

just took a look at webpack config for host and ran across this issue webpack/webpack-dev-server#1778 stating the protocol should not be included in the webpack host config, so i take back that it's an issue on the webpack-dev-server side 😄

just did a quick test moving the http:// from the host config to the entry config and all works fine. i feel like the protocol shouldn't be hard coded in the entry config though.

[dev-rsilver]

Also experienced this issue

[caylaxnicole]

I get the same error, I've tried adding host: 'localhost' to the devServer object in static.config.js but
now I get this error:
sockjs.js:810 Uncaught SyntaxError: The URL 'localhost:3000:3000/sockjs-node' is invalid

[J-F-Liu]

Find a workaround, add the following to packages.json, then yarn:

  "resolutions": {
    "react-static/webpack-dev-server": "3.2.1"
  }

[tannerlinsley]

While unrelated, we have released another patch version. Please upgrade to this version and ensure this issue still exists. Thanks!

[evenius]

@tannerlinsley I first encountered this bug on 7.0.8 + 7.0.9, with npm, so I think it's safe to say it does :/

Edit: Saw that you just now updated to 7.0.9, so am trying again now

Edit 2: Tried again (and looking at the commits), no change

[andrezero]

Same, still happens with 7.0.9, but this worked for me

  "resolutions": {
    "react-static/webpack-dev-server": "3.2.1"
  }

[SleeplessByte]

Fixed in #1135

[kosich]

Not sure if this is related to the resolutions hack, but when I got a blank project launched using it, the HMR for CSS seem to be not working:

While I still see a message in my browser console:

[HMR] Reload all css

Nothing is actually updated. Yet when I hit reload in my browser, the new styles are fetched.

So change detection works, and auto-recompilation works, it is just not hot-updated for some reason.

FYI

[dgavara]

Any update on this?

[MrBhatt]

@dgavara The issue is still seen, atleast for me (today's install of react-static)

[SleeplessByte]

You can temporarily use #1135 by checking it out, installing dependencies, building it and using a local path to react-static/packages/react-static in your project's package.jsoj

[dgavara]

@tannerlinsley Looks like the PR for this fix is merged but not released?

[tannerlinsley]

Correct, count on a release in the next 48 hours.

[dgavara]

Great! Thanks @tannerlinsley.

[dgavara]

@tannerlinsley Is anything changed in v7.0.10? I just see versions updated.

[tannerlinsley]

https://github.com/nozzle/react-static/blob/master/CHANGELOG.md#7010

[dgavara]

Great. I still see the issue. Do I need to do anything else other than updating the packages?

[tannerlinsley]

Do you have custom devServer configs?

[dgavara]

All I have is devServer: { host: 'http://xxx.xxxx.xxx.com', disableHostCheck: true, port: 3002, },

[tannerlinsley]

Remove the http:// from the host.

[dgavara]

Nice. That works! Thanks @tannerlinsley. This helped. We can move forward with v7 upgrade.

[Trolleymusic]

This just started happening to me today on a 6.3.9, but it wasn't happening last week!

I've added the workaround

"resolutions": {
  "react-static/webpack-dev-server": "3.2.1"
}

Just letting you know as obviously the proper solution would be to upgrade to 7.x

[pedrofurtado]

@Trolleymusic The webpack-dev-server released a version 3.4.1, that fixes this bug, I suppose. At least for applications that I work, the bug is gone away. 👍

Links for reference (for future readings):

webpack/webpack-dev-server#1754
webpack/webpack-dev-server#1664
webpack/webpack-dev-server@2f7f052

🤝