typescript - 如何让热模块重新加载以在 typescript monorepo 中工作

Question

因此，在过去的几天里，我一直在完全徒劳地尝试在基于 Typescript/React/Koa/Mongo 的 monorepo 中重新加载热模块；我觉得我一直在用头撞砖墙。 HMR 的文档很可怜(互联网上的几乎所有内容都只是解释如何做某事的一部分)。我已经做了很多谷歌搜索并阅读了很多不同的......我的问题的类似版本，但似乎没有人有一个有用的解决方案。

我已经整理了问题的最小 repo 版本:https://github.com/benwainwright/hmr-issue-minimal-repo ，这就是我的项目的大致设置方式:

packages/one是一个包含后端代码

的 Yarn 工作区

packages/two是一个包含 React 的 Yarn 工作区
组件/前端代码

如果我构建并运行它，有时我可以让它注意到我正在尝试在客户端中进行热重载，失败，然后进行完整的页面重载。发生这种情况时，控制台上会出现以下错误

｢hot｣ Error: Aborted because ../two/renderApp.tsx is not acceptedUpdate propagation: 
../two/renderApp.tsx -> ../two/index.tsx -> ./src/frontend-entry-point.tsx -> 1    at 
hotApplyInternal (http://localhost/assets/app.js:508:30)    at Object.hotApply [as apply] 
(http://localhost/assets/app.js:362:19)    at eval (webpack-internal:///./node_modules/webpack-hot- 
client/client/hot.js:121:23)

我已经尝试了各种软件包的各种不同组合，并且我还用 交换了执行热插拔 ( https://github.com/benwainwright/hmr-issue-minimal-repo/blob/edcd8ad8c4fb9686abce12237d51a5b6f37dd636/packages/two/renderApp.tsx#L13-L16 ) 的代码 react 热加载器 .没有任何效果。如果有人知道如何让它工作，我将永远感激不尽!

Answer 1

为了使 react-hot loader 工作，您需要应用几件事情。

在你的 babel 插件中应用“react-hot-loader/babel”

将 react-dom 设为别名至@hot-loader/react-dom

用 hot 包裹你的 App 根组件来自 react-hot-loader/root 的 hoc

这些步骤是基于 https://github.com/gaearon/react-hot-loader/tree/master/examples/typescript 的 React HMR 的基本用例。 .
问题是您的情况有点复杂，因为您的前端应用程序位于 node_modules ，并且默认情况下，babel 不会编译 node_modules 中的模块，因此您需要指定要编译它们。
您可以在此处阅读我的答案中的解释: Use Webpack HMR with a hoisted Lerna React Project