React使用styled-components出现Invalid Hook Call错误，求解决方案

我用npx create-react-app创建React项目后，在App.js中编写了包含styled-components的代码，但运行项目后浏览器控制台出现大量Invalid Hook Call警告和Uncaught TypeError: dispatcher is null错误，页面完全空白。我确认React和ReactDOM是最新版本，也没有自行使用Hooks，该怎么解决？

问题代码 #

App.js：

import './App.css';
import styled from "styled-components";

const Main = styled.main`
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;

  display: flex;
  flex-direction: column;
  align-items:  center;

  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  `;

const Header = styled.header`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 100%;

  border-bottom: 1px solid #3a3a3c;

  font-weight: 700;
  font-size: 3.6rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  `;

function App() {
  
  return (
    <div>
      <Main>
        <Header>My App</Header>
      </Main>
    </div>
  );
}

export default App;

package.json：

{
  "name": "wordle",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

解决方案 #

1. 安装适配React 18的styled-components版本

你的package.json里没有列出styled-components依赖，说明要么没安装，要么安装的版本和React 18不兼容。执行以下命令：

• 卸载旧版本（如果已安装）：

  npm uninstall styled-components
  

• 安装最新兼容版本：

  npm install styled-components@latest
  

2. 清理重复依赖，确保只有一个React实例

项目中存在多个React实例也会触发这类Hook错误：

1. 执行npm ls react查看依赖树，检查是否有多个React版本或重复引用
2. 如果发现重复，执行以下操作清理：
   • 删除项目根目录下的node_modules文件夹
   • 删除package-lock.json文件
   • 重新安装所有依赖：

     npm install
     

3. 确认React 18的渲染配置正确

检查src/index.js文件，确保使用React 18的createRoot进行渲染（create-react-app 5.x版本默认是配置好的，但可以确认下）：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

完成以上步骤后，重启项目，错误应该就能解决，styled-components的内容可以正常渲染。

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