socket.io-client causing a syntax error on ie 11 - Next js

Question

I migrated my CRA project to Next js, I still used my CRA app, just installed next js and made some changes. Now my CRA app works fine in IE 11, I'm using socket io for my chat feature. But when I migrated my CRA to Next js, this error occurs in IE.

SCRIPT1002: Syntax error
_app.js (24050,23)

This is what it shows when I click the error

/***/ "./node_modules/debug/src/browser.js":
/*!*******************************************!*\
  !*** ./node_modules/debug/src/browser.js ***!
  \*******************************************/
/***/ (function(module, exports, __webpack_require__) {

/* provided dependency */ var process = __webpack_require__(/*! process */ 
"./node_modules/process/browser.js");
/* eslint-env browser */

/**
 * This is the web browser implementation of `debug()`.
 */

exports.formatArgs = formatArgs;
exports.save = save;
exports.load = load;
exports.useColors = useColors;
exports.storage = localstorage();
exports.destroy = (() => {
    let warned = false;

    return () => {
        if (!warned) {
            warned = true;
            console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
        }
    };
})();

I did a lot of research, I'm stuck on this for 3 days now. I tried to transpile the 'debug' dependency using next-transpile-modules, but then it shows another error, on a different dependency, I tried to transpile that "dependency" again, then another one again, until I got a loop of error. It seems that all of the dependencies that socket io client is using, are not transpiled. I wonder why my CRA app works just fine in IE 11, while my CRA/Next JS, is not. I figured that the error is cause by socket io client, cause evert time I add the page/component that contains socket io-client, the error occurs, and when I remove it, the error is gone. Please help how to fix this, do I need to transpile the whole node_modules or what? Please help thank you!.

Answer 1

I can reproduce the issue when using the latest version of socket.io-client. It's a known issue related with the debug dependency in socket.io-client. For more detailed information, you can refer to this issue on GitHub, this thread and this thread.

If you want to support IE 11, you can downgrade your socket.io-client to version 2.3.1. This version of socket.io-client uses debug dependency ~3.1.0 which won't break in IE 11. You can delete the socket.io-client folder in node_modules, then run npm i [email protected] to install version 2.3.1. I have tested this and it can work well in IE 11.