Uncaught runtime errors: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

[zedfight]

在本地开发过程中修改 ActionHandler 时，会导致热更新失败并触发以下错误：

[zedfight]

项目中使用了热更新（Fast Refresh）和懒加载而导致的问题，目前尚未找到最佳解决方案。当前的临时解决方法是： 方案1：将模块对应的顶层组件（[module]/components/Main.tsx）改写为普通函数组件，示例如下：

export default function Main() {
  return <div>Test</div>;
}

方案2：将懒加载模块进行一次转换，示例如下：

// 改造前
// Main.tsx
import { Async } from 'reaux';
const Home = Async(() => import(/* webpackChunkName: "home" */ 'src/modules/home'), "View");

// 改造后
// view.ts
export { View as default } from "./index";

// Main.tsx
import { Async } from 'reaux';
const Home = Async(() => import(/* webpackChunkName: "home" */ 'src/modules/home/view'), "default");

方案3：使用 react-hot-loader 代替 @pmmmwh/react-refresh-webpack-plugin + react-refresh

这种方案只是临时方案，我们仍在寻找更好的解决方案。在未来的版本中，我们希望能够提供更稳定和有效的修复措施。

[zedfight]

https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/190#issuecomment-753030631

[zedfight]

pmmmwh/react-refresh-webpack-plugin#190 (comment)

该问题根本原因是因 Actions 和 View 之间的循环依赖导致，这是架构设计上的缺陷但不影响正常使用，我们正在寻找最佳解决方案。

[zedfight]

循环依赖可通过 webpack 插件 circular-dependency-plugin 检测