0

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!.

benjamin_nmn
  • 97
  • 2
  • 9

1 Answers1

0

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 socket.io-client@2.3.1 to install version 2.3.1. I have tested this and it can work well in IE 11.

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • I downgraded to 2.3.1, but it didn't work on me, I just got an infinite loop of error. It says object doesn't support method attachshadow, etc. I guess IE also doesn't support those codes. What I wonder is why on CRA , the latest socket.io-client works, but not on nextjs ? – benjamin_nmn Aug 25 '21 at 23:43
  • I test with a new `creat-next-app` app and install `socket.io-client@2.3.1`. Then I only add this line `import io from "socket.io-client"` in `_app.js`. It doesn't show any error in IE. Are you testing in this way? If you have other codes added in your nextjs app, it may cause other errors. If so, please provide [a minimal code snippet](https://stackoverflow.com/help/minimal-reproducible-example) which can **reproduce the issue**, so that we can have a test and see how to help. For the situation in CRA, I'll make a test and see if it works. – Yu Zhou Aug 26 '21 at 08:45
  • It works, but now I have to install the same version on my backend, the problem is im getting an error that says there's no socket.io@2.3.1 version on my backend – benjamin_nmn Sep 01 '21 at 01:20
  • downgraded my server to v2.3.0, it works. – benjamin_nmn Sep 01 '21 at 01:23