Internet Explorer ES6 function not compiled

[tomtom94]

Describe the bug
Internet Explorer ES6 function not compiled, which comes from socket.io-parser module a dependency of socket.io-client.

I have been trying to force the compilation for this specific module, but babel-loader can't reach it because I am not making a straight ES6 import of socket.io-parser in my pages.
import parser from 'socket.io-parser' otherwise I would have compiled this module easily :) But I need you to do it for me. And get a top notch module 🥇

function excludeNodeModulesExcept(modules) {
  var pathSep = path.sep
  if (pathSep == '\\')
    // must be quoted for use in a regexp:
    pathSep = '\\\\'
  var moduleRegExps = modules.map(function(modName) {
    return new RegExp('node_modules' + pathSep + modName)
  })

  return function(modulePath) {
    if (/node_modules/.test(modulePath)) {
      for (var i = 0; i < moduleRegExps.length; i++) if (moduleRegExps[i].test(modulePath)) return false
      return true
    }
    return false
  }
}

webpackRule = [
    {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: excludeNodeModulesExcept(['query-string', 'socket.io-parser']),
      loader: 'babel-loader'
    }
]

Expected behavior
I want the javascript bundles to run on Internet Explorer 11, as simple as that.

[darrachequesne]

Hi! We are using webpack and babel-loader for our bundles, did you check https://github.com/socketio/socket.io-client/blob/master/support/webpack.config.js ?

[tomtom94]

Look at this line,

Your webpack compilation in /dist directory, It just doesn't touch at what is in node_modules.

https://github.com/socketio/socket.io-client/blob/master/dist/socket.io.js#L263

[tomtom94]

Would you like me to make a PR ?

Or you got this ? You would go 10x faster than me.

I am not in a hurry. I just want my visitors from Africa who are using Internet Explorer to have a fully operational app. That's it.

[darrachequesne]

@tomtom94 I'm afraid I may not understand your issue. We do indeed support browsers down to IE9 by default, maybe your webpack configuration is incorrect?

For example, there is no "const" nor arrow functions in the bundle here: https://github.com/socketio/socket.io-client/blob/master/dist/socket.io.js

Could you please check?

[tomtom94]

I confirm you didn't understand.

As you can see in this line https://github.com/socketio/socket.io-client/blob/master/dist/socket.io.js#L263

Your are downloading this module https://github.com/socketio/socket.io-parser

and there is no babel-loader in socket.io-parser module.

Would you install babel babel-loader in https://github.com/socketio/socket.io-parser application in order to support Internet Explorer 11.

IE11 is a browser better than IE9 👍

[tomtom94]

Otherwise it might just be in module socket.io-client to include in babel-loader the /node_modules/ directory

it's just 2 lines of code.

https://github.com/socketio/socket.io-client/blob/master/support/webpack.config.js

    rules: [
      {
        test: /\.m?js$/,
        include: "/node_modules/",      // <============ the new line here
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              "@babel/plugin-transform-object-assign",
              "@babel/plugin-transform-arrow-functions", // <============ the new line here
            ],
          },
        },
      },
    ],

Many thanks.

I would invite you to check it out straight on the socket.io website.

https://www.browserling.com/browse/win/7/ie/11/http%3A%2F%2Fsocket.io ===> This page can't be displayed (nginx error has nothing to do with us) we can't make the test in live.

Try your module with https://www.browserling.com please IE11

[darrachequesne]

@tomtom94 that's indeed weird for the https://socket.io website, the whiteboard demo seems to be working though: https://browserling.com/browse/win/7/ie/11/https%3A%2F%2Fsocketio-whiteboard-zmx4.herokuapp.com%2F (from https://socket.io/demos/whiteboard/)

Maybe an unsupported TLS version?

That being said, I think the node_modules folder is already included in the babel transpilation, you can find it in the output here: https://github.com/socketio/socket.io-client/blob/master/dist/socket.io.js#L5486-L5887

[tomtom94]

I can tell you. I have the issue in my final bundles.

I will look for it. I am not crazy.

[tomtom94]

Got it I think.

When you make npm i socket.io-client

It makes also a require, like if you do npm i socket.io-parser

Which means you are using socket.io-parser with ES6 arrow functions and not the one transpiled like you think. Am I right ?

Thanks.

In you example application https://socketio-whiteboard-zmx4.herokuapp.com you are making a DOM import of your script (transpiled)

Which means you can't catch the error bro.

This is a pretty critical issue for all the user having a very old computer in Africa, using IE11 or IE9. And I can tell you there are a lot of Windows XP users...

You made my day I am good 👍

[tomtom94]

Would you confirm me you got that bug ?
Would you like me to make a PR or you good ?

I remind you => Just need to install babel in socket.io-parser module.

[darrachequesne]

Please use babel to transpile the code to ES5/ES3. This is the best tool for this job.

More information here: sindresorhus/ama#446

Thanks!

[markvandenbrink]

Hi there,

I've run into the same issue. But the solution is quite simple. Webpack uses the ES6 build, and by adding a browser field to the exports field in package.json this can be solved. Created a PR for this.

In the meantime, you can use the following workaround by adding an alias to your webpack.config.js:

resolve: {
  alias: {
    "socket.io-client": path.resolve(__dirname, "node_modules/socket.io-client/dist/socket.io.js"),
  },
},

Hope this helps!