Webpack issue trying to bundle socket.io

Question

I'm try to build a webpack bundle containing socket.io

package.json

{
  "name": "socketio-webpack",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "dependencies": {
    "socket.io": "1.4.4"
  },
  "devDependencies": {
    "babel-core": "6.4.0",
    "babel-loader": "6.2.1",
    "babel-preset-es2015": "6.3.13",
    "socket.io": "1.4.4",
    "webpack": "1.12.11"
  }
}

webpack.config.js

var path = require('path');

module.exports = {
    entry: "./src/entry.js",

    output: {
        path: __dirname,
        filename: "bundle.js"
    },

    module: {
        loaders: [
            {
                test: /\.js?/,
                include: path.resolve(__dirname, 'src'),
                loaders: [
                    'babel?presets[]=es2015',
                ]
            }
        ]
    }
};

src/entry.js

import Server from 'socket.io';

Running webpack gives the following warnings and errors:

Hash: 0bfb3971f31b27c6c1fb
Version: webpack 1.12.11
Time: 2106ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.21 MB       0  [emitted]  main
    + 170 hidden modules

WARNING in ./~/socket.io-client/socket.io.js
Critical dependencies:
1:475-482 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.
 @ ./~/socket.io-client/socket.io.js 1:475-482

WARNING in ./~/ws/lib/Validation.js
Module not found: Error: Cannot resolve module 'utf-8-validate' in D:\temp\socketio-webpack\node_modules\ws\lib
 @ ./~/ws/lib/Validation.js 10:19-44

WARNING in ./~/ws/lib/BufferUtil.js
Module not found: Error: Cannot resolve module 'bufferutil' in D:\temp\socketio-webpack\node_modules\ws\lib
 @ ./~/ws/lib/BufferUtil.js 10:19-40

ERROR in ./~/socket.io/lib/index.js
Module not found: Error: Cannot resolve module 'fs' in D:\temp\socketio-webpack\node_modules\socket.io\lib
 @ ./~/socket.io/lib/index.js 7:11-24

ERROR in ./~/socket.io-client/package.json
Module parse failed: D:\temp\socketio-webpack\node_modules\socket.io-client\package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       "[email protected]",
 @ ./~/socket.io/lib/index.js 11:20-55

ERROR in ./~/engine.io/lib/server.js
Module not found: Error: Cannot resolve module 'fs' in D:\temp\socketio-webpack\node_modules\engine.io\lib
 @ ./~/engine.io/lib/server.js 8:19-32

ERROR in ./~/ws/lib/WebSocketServer.js
Module not found: Error: Cannot resolve module 'tls' in D:\temp\socketio-webpack\node_modules\ws\lib
 @ ./~/ws/lib/WebSocketServer.js 15:10-24

ERROR in ./~/options/lib/options.js
Module not found: Error: Cannot resolve module 'fs' in D:\temp\socketio-webpack\node_modules\options\lib
 @ ./~/options/lib/options.js 6:9-22

ERROR in ./~/mime-db/db.json
Module parse failed: D:\temp\socketio-webpack\node_modules\mime-db\db.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "application/1d-interleaved-parityfec": {
|     "source": "iana"
|   },
 @ ./~/mime-db/index.js 11:17-37

webpack appears to be parsing modules from the node_modules directory even though I have explicitly included only the src directory.

Answer 1

Webpack is just trying to resolve all the requires. When you bundling a server app you must implement a little hack described here.

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  entry: './src/main.js',
  target: 'node',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'backend.js'
  },
  externals: nodeModules
}