Error when building for WebPack

[IngwiePhoenix]

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:

Ingwie@Ingwies-Macbook-Pro.local ~/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

Ingwie@Ingwies-Macbook-Pro.local ~/W/BIRD3 $ find node_modules/socket.io-client -name "dist"
[empty]

Ingwie@Ingwies-Macbook-Pro.local ~/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.

[johnelliott]

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.

[Satyam]

@johnelliott : just do require("socket.io-client"), Webpack will locate the correct source via the package.json entry. The warning comes because that file is packaged to be loaded via a <script> tag.

[IngwiePhoenix]

Nope.

The reason why it did not work for me was that I was using a plugin to resolve Bower modules, which didn’t play entirely nice on nested require()s. So what I did was to change that factor.

If you were using a plugin called something like „bower-webpack-plugin“ or alike, dump it. the actual solution is this:

var bowerProvider = new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]),
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
], ["normal", "loader"]);

It totally look awkward, agreed. But if you read it over a couple of time,s you will realize that it changes the way that modules are resolved, and hence required.

If that still does not work, then you could use a module alias.

Within the client, the debug library is loaded like so:

var debug = require(„debug“)(…); // excuse the quoting, my mail client sucks.

So you can add a module alias in your webpack.config.js:

// Add the alias section into the resolve section of the config.
module.exports = {
resolve: {
alias: {
// Ensure compatibility to original bootstrap
"debug$": path.join("node_modules","debug","index.js")
}
}
};

If that still does not work, let me know. :)

[cusspvz]

Are you using babel?

[IngwiePhoenix]

I was not. I switched to SocketCluster in the meantime since that worked.

[xiaomingplus]

so the best solution is?

[cusspvz]

import IO from 'socket.io-client'

should work fine with webpack + babel

[IngwiePhoenix]

When I used it, I think I'd called out for the index.js file directly. But its quite a while ago...so i cant be certain.

[cusspvz]

Think this could be closed.

[JakeChampion]

I am getting this error still, I don't think this should be closed just yet.

[JakeChampion]

I fixed this by uninstalling socket.io-client from npm and installing via bower

[stephensong]

I am having this same problem. I don't use bower. Is there another way?

[IngwiePhoenix]

You can use an alias in your webpack config.
Or the SIO devs find a better solution.

[faller]

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?

[kennetpostigo]

@faller what do we put for node root? like in the public directory or is that something from an HTML file?
My bad if it's a bad question, never used any of this before.