React MUI点击元素触发“Converting circular structure to JSON”错误求助

问题详情 #

• 触发场景：点击任何MUI可点击元素（如Button）均会报错，即使是未绑定点击事件的MUI Button也无法幸免；但使用原生<button>元素完全正常。
• 代码示例：

const Header = ()=>{
    const [isOpenAuth, setIsOpenAuth] = useState(false);
    const [isOpenRegister, setIsOpenRegister] = useState(false);
    return <div>
        <header className="header">
            <Wrapper>
                <img src={logo} className="logo" alt="logo" />
                {/*<Button variant="outlined" onClick={() => setIsOpenAuth(true)} className="header-controls">Войти</Button>*/}
                {/*<Button variant="outlined" onClick={() => setIsOpenRegister(true)} className="header-controls">Регистрация</Button>*/}
                <button onClick={() => setIsOpenAuth(true)}>Войти</button>
                <button onClick={() => setIsOpenRegister(true)}>Регистрация</button>
            </Wrapper>
        </header>
        <Modal handleClose={() => setIsOpenAuth(false)} isOpen={isOpenAuth}>
            <AuthModal/>
        </Modal>
        <Modal handleClose={() => setIsOpenRegister(false)} isOpen={isOpenRegister}>
            <RegisterModal/>
        </Modal>
    </div>
}

• 错误信息：

Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
--- property '__emotion_real' closes the circle

排查思路 #

• 检查Emotion与MUI版本兼容性：错误中出现的__emotion_real是Emotion样式库的内部属性，MUI v5依赖Emotion 11.x版本。确认项目中@mui/material、@emotion/react、@emotion/styled的版本是否匹配，版本不兼容极易引发循环引用问题。
• 排查全局JSON序列化逻辑：检查项目中是否存在全局拦截JSON.stringify的代码（比如监控工具、状态持久化组件），这类逻辑如果不小心序列化了MUI组件内部的Emotion对象，会因循环引用触发错误。
• 检查自定义Modal组件实现：你使用了自定义<Modal>组件，排查其内部是否在状态更新、props传递过程中尝试序列化组件实例或包含Emotion上下文的对象，错误的处理逻辑可能导致循环引用。
• 重置依赖缓存：删除node_modules、package-lock.json/yarn.lock文件，重新执行npm install或yarn install，排除依赖包版本冲突或缓存损坏导致的异常。
• 验证Emotion样式注入配置：如果项目手动配置过Emotion的CacheProvider，确认配置是否正确，错误的样式注入配置可能导致Emotion内部对象出现循环引用。
• 最小化复现定位：创建极简测试组件，仅引入React、MUI Button及必要依赖，验证是否仍会报错。若正常，再逐步添加原项目的依赖和组件，定位冲突来源。

内容的提问来源于stack exchange，提问作者plurandfun