React集成Redux后出现__WEBPACK_DEFAULT_EXPORT__初始化前访问错误求助

核心原因分析 #

这个错误本质是循环导入/模块初始化顺序冲突——Webpack处理模块时，某个模块还未完成初始化就被其他模块提前引用了。结合你的场景，大概率是store与App（或App依赖的组件）存在循环引用，或是store文件的导出逻辑有问题。

具体排查步骤 #

1. 检查redux/store.js的导出与初始化逻辑 #

打开store.js，确认：

• 是否正确使用默认导出，示例正确写法：

  import { createStore } from 'redux';
  import rootReducer from './reducers';
  
  const store = createStore(rootReducer);
  export default store;
  

• 有没有在store初始化前，导入了依赖App组件的模块（比如reducer里引用了组件的常量，而组件又导入了store）。

2. 排查循环引用 #

重点检查以下场景：

• App.js或其内部组件是否直接/间接导入了store实例？比如组件里用import store from '../redux/store'获取store，同时store又导入了该组件相关的reducer或常量。
• 解决办法：
  • 组件中获取store数据或触发action，改用useSelector/useDispatch Hooks，不要直接导入store实例。
  • 把循环依赖的共享常量抽成单独文件（比如constants.js），避免模块互相引用。

3. 调整导入顺序验证 #

尝试在index.js中调换store和App的导入顺序：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./redux/store"; // 先导入store
import App from "./App"; // 后导入App
import Modal from "react-modal";

Modal.setAppElement("#root");

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

如果调整后恢复正常，说明确实是初始化顺序导致的循环引用问题，需要按步骤2彻底解决。

4. 验证store是否能正常创建 #

在store.js末尾添加日志，确认store初始化是否成功：

console.log('Store initialized:', store);
export default store;

如果控制台没有打印这条日志，说明store文件本身存在语法错误或依赖问题，需要检查reducer的编写是否正确。

5. 检查依赖版本兼容性 #

确保react-redux与redux版本匹配：

• 推荐使用Redux Toolkit简化开发，更新依赖：

  npm install @reduxjs/toolkit react-redux --save
  

  旧版Redux与新版react-redux可能存在初始化逻辑冲突。

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