Help pls. Issues with webpack.dev.server

Hackerspace Software Development
#1

I’m working through this course on udemy, and things are working quite well till I hit section19:162 The Webpack Dev Server. First, localhost:8080 isn’t working (ERR_CONNECTION_RESET). Next, when I bypass this by going to 127.0.0.1:8080, the page loads, but spits out this error in the console:

VM6:1 GET http://localhost:8080/sockjs-node/info?t=1585705664586 net::ERR_CONNECTION_RESET

This error repeats periodically with the ‘time’ tag updating (naturally). Refreshing the page locks it up where I have to close the tab and try again. I’m green enough to not know what’s going on. Here’s the installed list of dependencies:

"devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "babel-loader": "^8.0.5",
    "css-loader": "^3.4.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }

This list is straight from the course instructor’s git repo (video 167 adds the css-loader and style-loader entries). Lots more info to be had, but before I spew all that here, anything obvious stand out?

Thanks!

#2

@mattarmstrong if you didn’t know I help to found freecodecamp.org which covers more than your $99 udemy class ever will. I’ll be glad to do a screen sharing session and personally walk you through setting up webpack.

Also if you put your code up on github or repl.it then I can review it and let you know where to fix the bugs.

1 Like
#3

awesome! thanks! I’ll get stuff uploaded and reach out after lunch

1 Like
#4

here’s the repository:

Happy to do a screen share if you think we need to, but figured it would be helpful for you to see this first. I’m free all afternoon, so I can hop on anytime.

2 Likes
#5

So I was able to get it to work with just one change in the package.json:

diff --git a/package.json b/package.json
index 8f7a914..3f29188 100644
--- a/package.json
--- b/package.json
@@ -5,7 +5,7 @@
    "main": "index.js",
    "scripts": {
      "build": "node_modules/.bin/webpack --mode production",
-      "serve": "webpack-dev-server --mode development --host 0.0.0.0 --hot"
+      "serve": "webpack-dev-server --mode development --host 0.0.0.0 --hot -- port 3000"
    },
    "author": "",
    "license": "ISC",

While adding the listener port flag is generally not needed, it does help to know about it since several infrastructure as a service platforms would do one of the following; A) Set this automatically via the environment variable PORT or NODE_PORT B) hard code the value based on their internal resource and one may not know what this port is.

Now the end result was me having to wait for webpack to finish compiling and presenting a message:

       22 hidden module
i   wdmj: Compiled successfully.

Once that came up I was able to access the site via http://localhost:3000/ and was presented with a blank rendered site that did send over a compiled webpack.js and basic html document.

So try that and if your still having issues then lets grab a screen sharing session via google meet.

2 Likes
#6

Thanks! That makes a lot of sense. I’d tried “—host 0.0.0.0”, but hadn’t messed with the port. I’ll give it a shot soon and let you know.

#7

Worked like a charm. I also had an extension running on my browser that was causing intermittent connection resets. Disabling that extension solved that part of the problem.

Thanks!

2 Likes
#8

Glad to help. I typically ask anyone that I assist in a project with to show their support to the Computer Committee. While it’s not expected and even if its just holding a presentation or class for the committee; anything will be appreciated.

#9

Way ahead of you :slight_smile:
I’m not yet at the spot where I could teach much of anything in your area, but I was planning on kicking in a few bucks to the committee :slight_smile:

1 Like