sockjs-node ERR_CONNECTION_REFUSED when accessing from network

[mummybot]

I get the following errors filling up my console log when accessing from either a virtual machine or a remote computer's browser. Fortunately HMR still works correctly.

GET http://localhost:8080/sockjs-node/info?t=1456748942511 net::ERR_CONNECTION_REFUSED
    AbstractXHRObject._start @ abstract-xhr.js:128
    (anonymous function) @ abstract-xhr.js:21

[WDS] Disconnected!
    sock.onclose @ client?4b5e:70
    EventTarget.dispatchEvent @ eventtarget.js:49
    (anonymous function) @ main.js:356

webpack.config.js

var path = require('path');
var node_modules = __dirname + '/node_modules'
var webpack = webpack = require('webpack');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var postcssImport = require('postcss-import');
var precss = require('precss');


var config = {
    // Thanks Christian Alfoni: http://christianalfoni.github.io/javascript/2014/12/13/did-you-know-webpack-and-react-is-awesome.html#vendors
    addVendor: function (name, path, loader) {
        loader = loader || 0;
        this.resolve.alias[name] = path;
        this.module.loaders[loader].noParse.push(new RegExp(path));
    },
    entry: [
        'webpack-dev-server/client?http://localhost:9090/',
        'webpack/hot/only-dev-server',
        path.resolve(__dirname, 'app/main.js')
    ],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
    },
    resolve: { alias: {} },
    devServer: {
        contentBase: 'build/'
    },
    module: {
        loaders: [
            {
                noParse: [],
                test: /\.jsx?$/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.s?css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&modules&importLoaders=1!postcss-loader')
            }
        ]
    },
      postcss: function(webpack) {
        return [
          postcssImport({ addDependencyTo: webpack }),
          precss,
          autoprefixer
        ];
      },
    plugins: [
        new BrowserSyncPlugin(
            {
                host: 'localhost',
                port: 3000,
                proxy: 'http://localhost:9090'
            },
            {
                reload: false
            }
        ),
        // Set the name of the single CSS file here.
        new ExtractTextPlugin('main.css', { allChunks: true }),
        new webpack.HotModuleReplacementPlugin()
    ]
};

config.addVendor('jquery', node_modules + '/jquery/dist/jquery.min.js');
config.addVendor('marked', node_modules + '/marked/lib/marked.js');

module.exports = config;

[mummybot]

I have tried adding CORS headers to devServer to no avail:

devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
    }
  },

[mummybot]

Hi @sokra and others,

I have created a test repo with a simplified webpack.config.js to show exactly this happening. Hopefully it is just my config setup.

Cheers

[sokra]

Change this line:

'webpack-dev-server/client?http://localhost:9090/',

to

'webpack-dev-server/client?http://' + require("os").hostname() + ':9090/',

[mummybot]

Thanks for pointing me in the right direction @sokra : I couldn't get this to work, possibly due to using a Mac locally and connecting via a windows machine which was not resolving the hostname correctly. However putting the IP in worked correctly:

# https://www.npmjs.com/package/ip
npm install ip --save-dev 

'webpack-dev-server/client?http://' + require("ip").address() + ':9191/',

[marko911]

I have similar issue, but I get 404 instead of CONN refused. I am using dev middleware and hot middleware on express server to run the server. The page loads fine but the hot reload doesn't work. When I save a change , webpack rebuilds but doesn't automatically load the changes in the browser.
webpack conifg:

  entry: [
require.resolve('webpack-dev-server/client'),
require.resolve('webpack/hot/dev-server'),
require.resolve('./polyfills'),
require.resolve('webpack-hot-middleware/client'),
path.join(paths.appSrc, 'index')
  ],
output: {
// Next line is not used in dev but WebpackDevServer crashes without it:
path: paths.appBuild,
pathinfo: true,
filename: 'bundle.js',
publicPath: '/'
 },

server.js :

  const express = require('express');
  const path = require('path');
  const app = express();
  const webpackDevMiddleware =require('webpack-dev-middleware');
  const webpackHotMiddleware =require('webpack-hot-middleware');
  require('babel-core/register');

  // const router=express.Router();
  // app.use(router);

  (function (){

    const webpack=require('webpack');
    const config=require('../config/webpack.config.dev');
    const compiler=webpack(config);

    app.use(webpackDevMiddleware(compiler, {
        publicPath: config.output.publicPath,
        stats: {colors: true}
    }));

    app.use(webpackHotMiddleware(compiler, {
      log: console.log,
      path: '/__webpack_hmr',
      heartbeat: 10 * 1000
    }));

  })();

  app.use(express.static('../'));


  app.listen(3000, ()=>console.log('Listening on port 3000'));

Any ideas?

[Hosar]

I'm also getting the same error:
GET /sockjs-node/info?t=1470203121020 404 8.530 ms - 45
GET /sockjs-node/info?t=1470203123328 404 1.403 ms - 45
GET /sockjs-node/info?t=1470203125639 404 0.776 ms - 45

I'm using: "express": "^4.14.0", "webpack": "^1.13.1", "webpack-hot-middleware": "^2.12.2", "webpack-middleware": "^1.5.1".

Any help is appreciated.

[ralphsmith80]

I also has some issues using

'webpack-dev-server/client?http://' + require("os").hostname() + ':9090/',

I expect using the IP as @mummybot suggested would work, but I just used 0.0.0.0.

'webpack-dev-server/client?http://0.0.0.0:9090'

[rlabrecque]

Just for future reference I was hitting 404 on this because I had: 'webpack-dev-server/client?0.0.0.0:9090' without the http://

I'm also getting the same error:
/sockjs-node/info?t=1470203121020 404 8.530 ms - 45
GET /sockjs-node/info?t=1470203123328 404 1.403 ms - 45
GET /sockjs-node/info?t=1470203125639 404 0.776 ms - 45

can you help me?

[gfried77]

For all people with the same error. It will also occur if your server (webpack-dev-sever) is listening on another port (e.g. 8080) than in line
"webpack-dev-server/client?http://localhost:3000"

Change the webpack.config.js to

  devServer: {
    host: 'localhost', 
    port: 3000
  }, 

or change the port in the correspoding line:
"webpack-dev-server/client?http://localhost:8080" to correct the port.

[onehorsetown]

@gfried77 - Thanks!

[stevenmusumeche]

@gfried77 you're my hero

[kaleemullah360]

since I am using angular-cli based project. it uses webpack but all the configurations are hidden from user. I mean I can't find webpack.config.js so please help me