在已有Next.js+Redux Toolkit项目中解决Chakra UI相关问题

云上老周

2026-8-19

问题

我在使用ChakraProvider组件时出现了如下警告：

Warning react-dom.development.js:86 Warning: You are importing hydrateRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

我的环境是一个正常运行的、使用Redux Toolkit的Next.js应用，添加Chakra UI并按步骤配置后出现了上述警告。应用虽能运行，但添加颜色主题配置后，即使移除ChakraProvider包裹，网站也会崩溃。请问冲突来源可能是什么？

安装命令：

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

相关代码：

import Head from "next/head";
import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/globals.css";
import Layout from "../components/layout/layout";
import { Provider } from "react-redux";
import { store } from "../store/app/store";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";

//仅导入ChakraProvider、extendTheme就会出现该警告。应用仍可运行，但添加如下颜色主题配置后，即使移除ChakraProvider包裹，网站也会崩溃。

const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
};

const theme = extendTheme({ colors });

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <ChakraProvider resetCSS theme={theme}>
        <Layout>
          <Head>
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
            <link
              rel="stylesheet"
              href="https://fonts.googleapis.com/icon?family=Material+Icons"
            />
            <link
              rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css"
            />
          </Head>
          <Component {...pageProps} />
        </Layout>
      </ChakraProvider>
    </Provider>
  );
}

export default MyApp;

分析与解决方案

警告原因

该警告源于Chakra UI的依赖（如emotion或framer-motion）内部仍从react-dom导入hydrateRoot，而React 18+及Next.js 13+环境要求从react-dom/client导入该API，导致版本适配冲突。

崩溃与冲突的核心来源

主题配置的全局残留污染
调用extendTheme定义自定义颜色后，Chakra的主题系统会向全局注入样式或配置逻辑，即使移除ChakraProvider，这些残留的全局配置仍会与Bootstrap、自定义globals.css的样式规则冲突，触发运行时错误。
依赖版本不兼容
- 若你的Next.js版本低于13（对应React 17），而Chakra UI v2+依赖React 18，会直接导致API不匹配，引发hydrateRoot导入警告及后续崩溃。
- 子依赖版本冲突：即使你指定了emotion和framer-motion的版本，部分嵌套依赖可能拉取了旧版react-dom相关包，导致环境混乱。
CSS重置规则冲突
启用Chakra的resetCSS属性后，会覆盖全局默认样式，与Bootstrap的CSS重置逻辑直接冲突。即使移除ChakraProvider，已注入的重置样式无法被清除，导致页面布局错乱或JS解析错误。
全局上下文初始化异常
Redux Provider与ChakraProvider的嵌套顺序（Redux在外）可能导致上下文初始化逻辑异常，主题配置的加入会放大这种异常，即使移除ChakraProvider，Redux上下文的状态可能已被破坏。

解决步骤

对齐依赖版本
- 升级Next.js到13+版本，确保兼容React 18：
```
npm install next@latest react@latest react-dom@latest
```
- 删除node_modules和锁文件，重新安装依赖：
```
rm -rf node_modules package-lock.json
npm install
```
隔离主题与样式
- 将主题配置抽离到单独文件（如src/theme.js），仅在使用ChakraProvider时导入该文件。
- 禁用Chakra的resetCSS，避免与Bootstrap冲突：
```
<ChakraProvider resetCSS={false} theme={theme}>
```
清除全局样式残留
- 移除globals.css中与Chakra、Bootstrap冲突的样式规则，或改用模块化样式。
- 完全移除Chakra相关代码后重启开发服务器，确认应用恢复正常，再逐步重新引入Chakra。

调整上下文嵌套顺序
尝试将ChakraProvider放在Redux Provider外层，避免上下文初始化冲突：

<ChakraProvider resetCSS={false} theme={theme}>
  <Provider store={store}>
    <Layout>
      {/* 页面内容 */}
    </Layout>
  </Provider>
</ChakraProvider>

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

在已有Next.js+Redux Toolkit项目中解决Chakra UI相关问题

警告原因 #

崩溃与冲突的核心来源 #

解决步骤 #

警告原因

崩溃与冲突的核心来源

解决步骤