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

Posted

技术标签:

【中文标题】套接字 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

【讨论】:

以上是关于套接字 IO 客户端 + React Typescript + 上下文 API 导致 TypeError:无法分配给对象“#<Object>”的只读属性“exports”的主要内容,如果未能解决你的问题,请参考以下文章