Socket IO client React Typescript Context API causing TypeError: Cannot assign to read only prop-CodePudding

I am using context API to delegate socket io client instance to other child components, once I declare a socket io client instance, react app throws TypeError: Cannot assign to read only property 'exports' of object '#'

import { createContext } from 'react';
import { io } from "socket.io-client";

const socket = io("http://localhost:5000"); // < once this line is added, throws error

export const SocketContext = createContext({});

export function SocketProvider(props: any) {
    return (
        <SocketContext.Provider value={{}}>
            {props.children}
        </SocketContext.Provider>
    )
}

CodePudding user response：

I have the same problem and mine was caused because of my (socket.io-client) version, I fixed it by downgrading the version to 2.1.1 and it worked for me.

by this reference https://flaviocopes.com/cannot-assign-readonly-property-export/ the problem is because of how the function is declared and the newest versions of (socket.io-client) there is a typescript but in the version the I have been downgraded to there is no typescript and it was the solution.

CodePudding user response：

This happened to me also. This problem is from socket.io-client. Best solution is to downgrade the socket.io-client version to 4.3.0 as: npm install [email protected]