React-Redux配置Store出现Require未定义错误，如何重写代码？

你遇到的问题本质是在ES模块环境里混用了CommonJS的require语法——你的configureStore.dev.js已经用了ES模块的import（比如开头的import { createStore, applyMiddleware, compose } from 'redux'），而ES模块环境中并没有定义require这个方法。下面给你两种针对性的解决办法：

1. 静态导入（常规场景首选） #

如果你的../reducers文件是通过export default导出根reducer的（比如export default combineReducers(...)），直接用ES模块的import替换掉require语句就行：

// 替换原有的 require 代码
import nextRootReducer from '../reducers';

另外我注意到你已经写了import StockApp from '../reducers';，如果StockApp就是你的根reducer，那完全可以直接用StockApp代替nextRootReducer，不需要额外导入。

2. 动态导入（适配热模块替换HMR场景） #

如果这段代码是为了开发环境的热模块替换（HMR），需要动态更新reducer的话，就用ES模块的动态导入语法（异步形式）：

if (module.hot) {
  module.hot.accept('../reducers', async () => {
    // 用动态导入替代 require
    const nextRootReducer = (await import('../reducers')).default;
    store.replaceReducer(nextRootReducer);
  });
}

这样既符合ES模块的规范，又能实现开发环境下reducer的热更新需求。

核心思路就是在ES模块文件里统一使用import语法，避免ES模块和CommonJS语法混用。

内容的提问来源于stack exchange，提问作者Tae Hoon Lee