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

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?

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

Some sockjs-node errors here

0 Answers0