使用useSelector时触发useSyncExternalStore未定义错误的解决方法

错误原因 #

useSyncExternalStore是React 18新增的API，你当前使用的React 17.0.2没有这个方法。而react-redux@9.x内部依赖该API实现状态订阅，所以调用useSelector时直接抛出未定义错误。

依赖冲突原因 #

react-redux@9.1.2强制要求@types/react版本≥18.2.25，但你的项目依赖的是@types/react@17.0.2，版本不匹配导致npm无法自动解析依赖，触发ERESOLVE冲突。

提供两种可选方案，根据项目需求选择：

方案一：降级Redux依赖（保留React 17） #

如果不想升级React，把react-redux和@reduxjs/toolkit降到兼容React 17的版本：

• react-redux兼容React 17的最高稳定版是8.1.3
• @reduxjs/toolkit对应版本是1.9.7（2.x版本要求react-redux 9.x，不兼容React 17）

执行命令：

npm install react-redux@8.1.3 @reduxjs/toolkit@1.9.7 --legacy-peer-deps

加--legacy-peer-deps是跳过npm 7+的严格peer依赖检查，避免安装时的冲突提示。

安装完成后，依赖版本会适配React 17，useSelector就能正常工作，不会再出现useSyncExternalStore未定义的错误。

方案二：升级React到18（推荐长期维护） #

如果项目允许升级，这是更优的长期方案，能获得React 18的新特性和更好的生态支持：

1. 先升级React核心包：

npm install react@^18.2.0 react-dom@^18.2.0 @types/react@^18.2.0 @types/react-dom@^18.2.0 --legacy-peer-deps

2. 确认Redux依赖（当前的react-redux@9.1.2和@reduxjs/toolkit@2.2.5已经兼容React 18），若安装后仍有问题，重新安装一次：

npm install react-redux@9.1.2 @reduxjs/toolkit@2.2.5 --legacy-peer-deps

3. 注意：React 18的入口文件需要改用createRoot，原ReactDOM.render已废弃：
   修改项目入口文件（如index.js/index.tsx）：

// 旧代码
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// 新代码
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

完成操作后重新启动项目：

npm start

测试useSelector的逻辑，确认console.log("calculator", mfeConfig)能正常输出状态，且无报错。

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