React Vite项目集成React Toastify遇useSyncExternalStore报错求助

问题根源分析 #

从你提供的package.json能定位到核心问题：

• React版本为18.2.0，但ReactDOM版本是17.0.2，版本不匹配导致React 18新增的useSyncExternalStore API无法被正确识别
• @types/react-toastify版本为4.1.0，和当前使用的react-toastify 10.0.4版本严重不兼容
• main.tsx仍在使用React 17的ReactDOM.render写法，不符合React 18的渲染规范

分步解决方案 #

1. 统一React和ReactDOM版本 #

执行命令将react-dom升级至18.2.0：

npm install react-dom@18.2.0
# 或使用yarn
yarn add react-dom@18.2.0

2. 更新react-toastify的类型定义 #

安装适配v10版本的类型包：

npm install @types/react-toastify@^10.0.0 --save-dev
# 或使用yarn
yarn add @types/react-toastify@^10.0.0 --dev

3. 改用React 18的createRoot渲染方式 #

修改main.tsx代码：

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import ErrorBoundary from '../src/ErrorBoundary';
import './index.css';
import { ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement!);

root.render(
  <React.StrictMode>
    <ErrorBoundary>
      <App />
      <ToastContainer />
    </ErrorBoundary>
  </React.StrictMode>
);

4. 移除重复的CSS引入 #

在注册处理方法的文件中，删除重复的import 'react-toastify/dist/ReactToastify.css';，仅在main.tsx中保留一次即可。

5. 清理依赖并重新安装（可选） #

若上述步骤后仍有问题，可清理依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

完成以上操作后，重启开发服务器，useSyncExternalStore相关错误即可解决，react-toastify能正常运行。

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