ReactJS style - components在渲染时导致Null错误

Question

我正在制作一个简单的React/Express网站，我正在尝试使用样式组件库实现CSS-in-JS。我的应用程序用正常的。css文件渲染一切都很好，但是当我尝试引入一个有样式的组件时，页面上没有任何渲染，并且我在控制台中得到一堆错误。特别是，我得到了一个"Uncaught TypeError: Cannot read properties of null (reading 'useDebugValue')";错误。

我的App.js文件是这样的:

import React, { Component } from 'react';
import { Routes, Route } from 'react-router-dom';
import styled from 'styled-components'
import MainPage from './components/mainPage.component.js';
const AppWrapper = styled.div`
text-align: center;
`;
class App extends Component {
render() {
return (
<div>
<AppWrapper>

<NavBar />
<Routes>
<Route path="/" element={<MainPage />}/>
</Routes>
</AppWrapper>
</div>
);
}
}
export default App;

我试图搞乱组件，但我得到的错误，无论什么文件的样式组件，即使组件本身(如<AppWrapper>)不包含任何东西。我也收到了一封"Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.";错误，但我不确定这是如何相关的。

知道为什么会这样吗?谢谢!

Answer 1

对于任何遇到这个问题的人，我想我找到了解决方案。它也发生在情感上(另一个css-in-js库)，所以问题不在于特定的库，而在于我的依赖项中的库复制。这个帖子解释得很好:https://github.com/styled-components/styled-components/issues/3045。我通过卸载样式组件(安装在我的项目根文件夹中)并重新安装在我的react/client-side文件夹中来解决这个问题。