When My Webpack 4 Server Suddenly Stopped Working

Now, I have a React development environment with webpack 4 set up on my local Windows 10 machine (How to set up local development environment for React with webpack 4 and babel 7).

I have encountered a few occasions that the webpack server suddenly stopped starting and giving me the error below. This happens to the folder where it was working previously.

It took me a while to why this is happening, but I found out a workaround to get the server going. I hope you are not having this issues, but if you are, this post might help you to save a few hours of banging your head against the brick wall.

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:3000
    at Object._errnoException (util.js:1024:11)
    at _exceptionWithHostPort (util.js:1046:20)
    at Server.setupListenHandle [as _listen2] (net.js:1351:14)
    at listenInCluster (net.js:1392:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1501:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:97:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ReactNpm@1.0.0 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ReactNpm@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

In my case, this happens when the server doesn’t get terminated correctly. From the command line interface, you should see the below termination confirmation message as below after pressing ctrl + c.

Terminate batch job (Y/N)?

For a few occasions, the server terminated without asking the confirmation. This is when the server doesn’t get terminated correctly and you cannot start another webpack server.

The workaround is to terminate the node task from Task Manager. Once this is done, you can restart the server with npm start.

Yay!

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …