Enabling Hot Module Replacement with webpack-dev-server

Coding Help
1

Hi all! New to glitch and hoping to move some of my projects over here. I am having a hard time getting webpack-dev-server to work. At the moment, I can’t get it to use HMR or live-reload. Specifically, I’m getting the message:

DevTools failed to load SourceMap: Could not load content for webpack://hello-express/rbd/pnpm-volume/e9cc1280-2dc5-4145-85b0-5223ded449e…pmjs.org/sockjs-client/1.4.0/node_modules/sockjs-client/dist/sockjs.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
index.js:173 [WDS] Disconnected!

Previously I was getting an additional error:

sockjs.js:1606 GET https://localhost:3000/sockjs-node/info?t=1605326466773 net::ERR_CONNECTION_REFUSED

Below is my webpack config:

const path = require('path')
const HTMLwebpackplugin = require('html-webpack-plugin')

const rules = [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader'
    }
  },
  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: ['style-loader', 'css-loader']
  }
] 

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'build')
  },
  module: {rules},
  plugins: [
    new HTMLwebpackplugin({
      template: './public/index.html'
    }) 
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    publicPath: '/', 
    overlay: true,
    compress: true,
    noInfo: true,
    hot: true,
    disableHostCheck: true,
    port: process.env.PORT ,
    public: '0.0.0.0:'+process.env.PORT 
  }
}?

and the script is

webpack serve --mode development

It seems to recompile just fine in the glitch log, but the app (at the url) itself disconnects and fails to reload.

any advice appreciated!

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.