react-static: [Bug] Local development server broken

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

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 22
Comments: 34 (9 by maintainers)

Most upvoted comments

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

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

J-F-Liu on Apr 16, 2019

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

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

andrezero on Apr 16, 2019

@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

evenius on Apr 16, 2019

I also experience the same problem

t0mclaudio on Apr 10, 2019

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

tannerlinsley on Apr 24, 2019

Fixed in #1135

SleeplessByte on Apr 17, 2019

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"

rickyrombo on Apr 11, 2019

@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):

https://github.com/webpack/webpack-dev-server/pull/1754 https://github.com/webpack/webpack-dev-server/pull/1664 https://github.com/webpack/webpack-dev-server/commit/2f7f052

🤝

pedrofurtado on May 21, 2019

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.

bmagnantb on Apr 12, 2019

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.

kirklikecaptain on Apr 12, 2019

Same with npm

Aykelith on Apr 10, 2019