"TypeError: Super expression must either be null or a function" with socket.io

[GGA557]

Hi, I'm trying to real-time updates to a react web app and I saw online that the best approach to using websockets was to create a wrapper component of the socket and wrap it around the app component. Whenever I try to simply import the component (import WebSocketProvider from './WebSocketContext') into my app class component, I receive a "TypeError: Super expression must either be null or a function."

I'm not sure if it's worth noting but my the websocket component is a functional component and my app component is a class component.

Here is my websocket component:

/* This is a websocket to the API (API WebSocket) */
import React, { createContext, useContext, useState, useEffect } from "react";
import io from 'socket.io-client';

const WebSocketContext = createContext(null);

export function WebSocketProvider({ children }) {
    const [webSocket, setWebSocket] = useState(null);

    useEffect(() => {
        const ws = io('localhost:3333');
        setWebSocket(ws);

        return () => { ws.close(); };
    }, []);

    return (
        <WebSocketContext.Provider value={webSocket}>
            {children}
        </WebSocketContext.Provider>
    )
}

export function useWebSocket() {
    const webSocket = useContext(WebSocketContext);
    if(!webSocket) {
        throw new Error('useWebSocket must be within a WebSocketProvider');
    }
    return webSocket;
}

I'm trying to find the cause for this error

[darrachequesne]

Hi! Did you check our React guide here: https://socket.io/how-to/use-with-react

It does not use the useContext() hook though.

[GGA557]

I hadn't seen that guide. Thanks a lot! I'll be trying that approach then.

[GGA557]

I've tried the guide and I'm still receiving the same error. Does Socket.io support class components or does it only work with functional components?

[GGA557]

Socket.io 4.6.0 and React 16.8.6 aren't compatible

[darrachequesne]

Oh, in that case could you try with the named export?

import { io } from 'socket.io-client';

The default export should not be used anymore, did you find it somewhere in our documentation?

[GGA557]

I had tried that initially but it didn't work reguardless.

[darrachequesne]

Could it be linked to https://stackoverflow.com/questions/42372976/typeerror-super-expression-must-either-be-null-or-a-function-not-undefined?

In any case, without a reproducible test case, I'm afraid we won't be able to help you.

[GGA557]

Well, the code worked completely well before I tried to import. I even changed the app component into a functional component and I'd still get the exact same error.

[GGA557]

For now, at least using version 2.3.0 works. Are there any issues with it I should be aware of and avoid using it?