Socket IO client + React Typescript + Context API causing TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Question

我正在使用上下文 API 将 socket io 客户端实例委托给其他子组件，一旦我声明了 socket io 客户端实例，react app 就会抛出 TypeError: Cannot assign to read only 属性 'exports' 对象“#”

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>
    )
}

Answer 1

我有同样的问题，我的问题是由于我的（socket.io-客户端）版本造成的，我通过将版本降级到 2.1.1 来修复它，并且它对我有用。

通过此引用 https://flaviocopes.com/cannot-assign-readonly-property-export/ 问题是因为函数的声明方式和 (socket.io-client) 的最新版本有一个打字稿，但在我已经降级到没有打字稿的版本中，这是解决方案。

Answer 2

我也遇到过这种情况。此问题来自 socket.io-client。最佳解决方案是将 socket.io-client 版本降级为 4.3.0，如下所示： npm 安装socket.io-client@4.3.0

Socket IO client + React Typescript + Context API causing TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Socket IO client + React Typescript + Context API causing TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

sockets

typescript

reactjs