fix: browser module resolution in webpack 5

[markvandenbrink]

Fixes browser module resolution in webpack. See issue #1457.

Note: the socket.io.js file is the generated output of make socket.io.js, and should not be manually modified.

The kind of change this PR does introduce

• a bug fix
• a new feature
• an update to the documentation
• a code change that improves performance
• other

Current behaviour

Webpack 5 uses the new exports field for module resolution. For web targets this results in the ES6 modules being used and this breaks compatibility with IE.

New behaviour

By adding the browser field to the exports field, webpack will use the ES5 build.

Other information (e.g. related issues)

#1457

[darrachequesne]

I'm not sure users should include the bundled file directly. If you have a dependency in common with the socket.io-client package, webpack will not be able to deduplicate it, will it?

[markvandenbrink]

No, it won't deduplicate since it's already in the bundle, I agree. But by specifying this browser field, the package works in all scenarios, including Internet Explorer. The downside is the risk of having a slightly larger bundle because of possible duplicates (though socket.io-client doesn't have many dependencies). But devs who care about this probably optimize their webpack configs to mitigate this (especially if they want to tree shake things).

But I understand what you are saying. So I leave it up to you to accept this PR or not.

If you keep it the way it is, I think it might be helpful to add a note about "out-of-the-box" compatibility with Internet Explorer on the browser section of this page: https://socket.io/docs/v4/client-installation/.

Now it just says: "Socket.IO does support IE9 and above". But v4 requires an additional Babel step to transpile to ES5 to become IE compatible. Devs need to know that.

Looking forward to the day we can finally drop IE support 😉 For now, it is still around...

Thanks for your time!

[darrachequesne]

@markvandenbrink that makes sense. I'll update the documentation to better reflect the need to transpile the code with babel.