socket.io: Error when building for WebPack

import IO from 'socket.io-client'

should work fine with webpack + babel

@rgranger This’s an example on how to use webpack and socket.io for the server:

package.json

{
  "name": "whatever",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "John Doe",
  "license": "ISC",
  "dependencies": {
    "brfs": "^1.4.3",
    "bufferutil": "^3.0.0",
    "socket.io": "^1.7.3",
    "transform-loader": "^0.2.4",
    "utf-8-validate": "^3.0.1"
  },
  "devDependencies": {
    "json-loader": "^0.5.4",
    "null-loader": "^0.1.1",
    "webpack": "^2.4.1"
  }
}

webpack.config.js

const path    = require("path");

module.exports = {
  entry: './server.js',
  target: 'node',
  output: {
    path: __dirname,
    filename: 'bundle.server.js'
  },
  module: {
    loaders: [
      {
        test: /(\.md|\.map)$/,
        loader: 'null-loader'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        exclude: '/node_modules/',
        loader: "transform-loader?brfs"
      }
    ]
  }
};

server.js

const server = require('http').createServer();
const io = require('socket.io')(server, {
  // serveClient: false // do not serve the client file, in that case the brfs loader is not needed
});
const port = process.env.PORT || 3000;

io.on('connect', onConnect);
server.listen(port, () => console.log('server listening on port ' + port));

function onConnect(socket){
  console.log('connect ' + socket.id);

  socket.on('disconnect', () => console.log('disconnect ' + socket.id));
}

A sample Webpack build for the server : https://github.com/socketio/socket.io/tree/master/examples/webpack-build-server

I came across the same problem when updating to npm 3.3.9 webpack 1.12.13 socket.io-client 1.4.5

Solving this by adding

    resolve: {
        alias: {
            'socket.io-client': path.join( nodeRoot, 'socket.io-client', 'socket.io.js' )
        }
    },
    module: {
        noParse: [ /socket.io-client/ ]
    }

Anyone has a better solution?

I am also not sure how to add the socket.io-client library into my client-side app to connect back to the server.

I am trying to require it like so:

var io = require("socket.io-client");

var socket = io("http://localhost:3000");
socket.on("data", function(data) {
    console.log("data event", data);
});

…and I get this error: TypeError: undefined is not an object (evaluating 'global.WebSocket') for an anon function.

I’m mostly a back-end guy so client-side javascript is not my strong suit.

Update: require("socket.io-client/socket.io") seems to have worked, but with a warning that suggests what was mentioned above: This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.

@freemh you save my life bro

I was getting this error with Webpack 2.2 and socket.io-client 1.7.2. I tried pretty much everything listed here and nothing worked. Eventually I stopped the errors by installing the debug module into node_modules, npm i debug -S and listing ‘debug’ as an external in my webpack config, externals: ['debug'],.