Subscribe method causes error in IE11

[jirehnimes]

Import and creating client is okay for IE11 but when using the subscribe method, it causes this error:

The application will stop into a white blank screen. It doesn't happen when in Chrome. See my implementation:

Edit #1: I was able to confirm that it's caused by the subscribe method, because I was trying to comment and uncomment SocketCluster related codes. When I uncomment the line for unsubscribe, the error occurs in IE11.

Edit #2: Tried to downgrade the version to 13, it seems the error doesn't happen. But I can't use it with a server in version 16.

Details:
SocketCluster Client Version: 16.0.1
Vue 2: 2.6.11

Expected: To work in IE11 similarly as in Chrome.
Actual: White blank screen in IE11 with syntax error. Working smoothly in Chrome.

[jondubois]

@jirehnimes I have not seen or heard about this error before - This means either it's caused by a recent browser update, some issue with your build/bundling tool, or more likely, something in your own code which is triggered by the subscription somehow.

• Do you have a handler (listener) for the socket subscribe event somewhere else in the code which has a syntax error in it?
• Is channelData a valid JSON string (could it be a JSON parsing SyntaxError)?

[jirehnimes]

@jondubois Thanks for responding immediately!

• Do you have a handler (listener) for the socket subscribe event somewhere else in the code which has a syntax error in it?

That's the only code block with the listener for socket subscribe. It's a method within a Vue component.

• Is channelData a valid JSON string (could it be a JSON parsing SyntaxError)?

I did code also the content of channelData and it is a valid JSON string.

I just want to clarify that the error happens only on the declaration of the subscribe channel because I commented the listener block or the loop after the subscribe channel declaration, the error persists on IE11. If I comment the subscribe channel declaration itself, the error will not occur.

[jondubois]

I can't see the line numbers in your stack trace. Based on what I can see, it does not look like an error from inside the socketcluster-client code. Could it be prototype pollution from a different library? Can you try running the same code in isolation without other libraries?

[jirehnimes]

@jondubois I doubled check and the issue only occurs when socket.subscribe is used.

Here's how I initialize the socket instance. Which is the content of the imported socket as shown in the above code or Vue component.

[jirehnimes]

@jondubois I removed any implementation of socket in the component and declared the subscribe method to the socket.ts file and the error didn't occurred even when the said file is still imported in the Vue component.

socket.ts

Vue component

If that's the case, I can't trigger the subscribe method by a method in a Vue component in IE11 even though it's working fine in Chrome.

[jirehnimes]

@jondubois Tried downgrading to v14.3.1, with the socket.subscribe in the method in Vue component. Error didn't occurred in IE11 and displayed the app as expected which was the original implementation. I think there's something off in v16 for IE11?

Vue component with SocketCluster-client v14.3.1

[jirehnimes]

@jondubois Sorry for a lot of replies. I decided to use SocketCluster client v14.3.1 with protocolVersion: 1 in the SocketCluster server v16.0.1 since it is working now with my full implementation for both Chrome and IE11.

[jondubois]

@jirehnimes Glad you found a solution, I was going to suggest this approach with protocolVersion. I have not heard of this issue before so I'm thinking that it could have something to do with your bundler or it could be that IE11 does not support some of the newer JavaScript constructs which SCv16 requires.

[jirehnimes]

@jondubois Yeah, thanks! Thanks also for responding! It's kinda tricky too and did a lot of comment and uncomment to verify which one causes the issue before I started this ticket.
Probably with the bundler? I'm using Vue CLI with Vue 2 because Vue 3 doesn't support IE11 yet. Adjusted the browser list to not ie <= 8 to make the app works in IE11. These things were before applying SCC. Even though I added socketcluster-client to transpileDependencies in vue.config.js, the issue still occurs.