套接字 IO 客户端 + React Typescript + 上下文 API 导致 TypeError：无法分配给对象“#<Object>”的只读属性“exports”

Posted 2023-02-21

【中文标题】套接字 IO 客户端 + React Typescript + 上下文 API 导致 TypeError：无法分配给对象“#<Object>”的只读属性“exports”

【英文标题】：Socket IO client + React Typescript + Context API causing TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

【发布时间】：2021-12-04 06:23:15

【问题描述】：

我正在使用上下文 API 将套接字 io 客户端实例委托给其他子组件，一旦我声明了一个套接字 io 客户端实例，react app 就会抛出 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>
    )

【参考方案1】：

我有同样的问题，我的问题是由于我的 (socket.io-client) 版本引起的，我通过将版本降级到 2.1.1 来修复它，它对我有用。 p>

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

【参考方案2】：

这也发生在我身上。这个问题来自socket.io-client。最好的解决方案是将 socket.io-client 版本降级到 4.3.0 为： npm install socket.io-client@4.3.0