Error when building for WebPack

A while ago, I had realized that there is an error when trying to use socket.io-client within a WebPack module. It turns out, that “dist/debug.js” can not be located. I did a little bit of unixy research:

[e-mail] ~/W/BIRD3 $ grep -r "dist/debug" node_modules/socket.io-client/
node_modules/socket.io-client//node_modules/engine.io-client/node_modules/debug/Makefile:all: dist/debug.js
node_modules/socket.io-client//node_modules/engine.io-client/node_modules/debug/Makefile:dist/debug.js: node_modules browser.js debug.js dist

[e-mail] ~/W/BIRD3 $ find node_modules/socket.io-client -name "dist"
[empty]

[e-mail] ~/W/BIRD3 $ find node_modules -name "debug.js" | grep dist

Conclusion: The dist folder must be a virtual folder that is used during the Browserify process… Now, how exactly do I get rid of that? It’s really heavy-lifting to require("socket.io-client/socket.io") although there already IS a system that knows commonJS.

With heavy-lifting, I mean that adding the SIO client is ~350KB… A fix would be pretty awesome.

[cusspvz]

import IO from 'socket.io-client'

should work fine with webpack + babel

[freemh]

@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