WDS Disconnected! sockjs-node refused, webpack-dev-middleware, expressjs - reactjs

Question

Some sockjs-node errors here
I'm building a dev server using express...
ADDED webpack-dev-middleware and webpack-hot-middleware for my React
Here's my webpack.config.js:
// require('dotenv').config()
const ESLintPlugin = require('eslint-webpack-plugin')
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
const path = require('path')
const webpack = require('webpack');
const eslintPlugin = new ESLintPlugin({ fix: true })
const manifestPlugin = new WebpackManifestPlugin()
const HMRPlugin = new webpack.HotModuleReplacementPlugin()
const htmlPlugin = new HTMLWebpackPlugin({
template: path.resolve(__dirname, 'build/app.html'),
filename: 'index.html',
})
const errorPlugin = new ErrorOverlayPlugin()
module.exports = {
mode: 'development',
entry: [
'webpack-dev-server/client?http://127.0.0.1:3999/',
'webpack/hot/only-dev-server',
'./src/index.js',
],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'main.bundle.js',
publicPath: '/',
pathinfo: true,
},
devServer: {
socket: 'socket',
hot: true,
overlay: true,
port: 3999,
inline: true,
stats: 'normal',
historyApiFallback: true,
},
performance: {
hints: false,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|svg|jpe?g|gif|ico)$/i,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
],
},
plugins: [eslintPlugin, manifestPlugin, errorPlugin, htmlPlugin, HMRPlugin],
devtool: 'cheap-module-source-map',
}
My server.js:
import express from 'express'
import debug from 'debug'
import logger from 'morgan'
import chalk from 'chalk'
import dotenv from 'dotenv'
import webpack from 'webpack'
import hotMiddleware from 'webpack-hot-middleware'
import wpDevMiddleware from 'webpack-dev-middleware'
import cors from 'cors'
import wpConf from './webpack.config'
dotenv.config()
const app = express()
const port = process.env.PORT
const ecoS = debug('ECO-Server')
const ecoC = debug('ECO-Client')
const compiler = webpack(wpConf)
const skipLog = (req, res) => {
var { url } = req
if (url.match(/sockjs/gi)) {
return true
}
return false
}
app.set('port', port)
app.use(cors({ maxAge: 1000 * 60 * 60 * 24 * 2 }))
app.use(
logger('dev', {
stream: {
write: msg => ecoC(msg.trimEnd()),
},
skip: skipLog,
})
)
app.use(wpDevMiddleware(compiler))
app.use(hotMiddleware(compiler))
setTimeout(() => {
app.listen(port, () => ecoS('Listening on port', chalk.cyanBright(port)))
}, 4000)
127.0.0.1:3999/sockjs-node/info?t=1615910198493:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
sockjs.js:1609 XHR failed loading: GET "http://127.0.0.1:3999/sockjs-node/info?t=1615910266231".
please help me this... anyone?