快速刷新问题:NextJs 无法与本地包一起正常工作。如何在开发时强制清除缓存?

Fast Refresh Issues: The NextJs is not working properly with local package. How can I force to clear cache while developing?

我有一个使用 NextJs(和 React)和 mobx-state-tree(但可以是 context 或 redux)作为包管理器构建的应用程序。所有商店都在一个名为 SMK(状态管理工具包)的 npm 包中创建和处理,我创建该包是为了使子商店可在我的移动和 Web 应用程序中重用。

工作原理:

  1. 在 SMK 上使用 modelsactionsviews 创建子商店并将其作为模块导出。
  2. 使用 yarn add @my-repo/smk 添加 SMK。
  3. 在我的应用程序中创建根存储并从 SMK 导入子存储作为根存储的子存储。
  4. 构建并启动应用程序,一切正常。

但我需要 运行 并在本地发布 SMK 以便于开发。我以前使用的解决方案是yalc.

使用 yalc 并在本地 运行ning 它是这个过程:

  1. 在 SMK 中,运行s yarn start。 (这样做 nodemon --ignore src/index.ts -e js,ts,tsx,json --watch src/ --exec yalc push --scripts
  2. 在APP中,运行s yalc add @my-repo/smk。 (这将添加一个依赖项,如 "@my-repo/smk": "file:.yalc/@my-repo/smk")。
  3. 在APP中,运行s yarn build然后yarn start

瞧!一切都运行完美,我在 SMK 上本地所做的任何更改在 APP 上运行完美。

但是,当我 运行 yarn devnext dev 作为 default of NextJs 它不起作用时。

这是我面临的错误:

错误解释:因为我只在本地添加了setTestingStatetestingState,所以说不存在

可能的原因:fast refresh没有正确刷新缓存。

我试过:

yarn devyalc解决这个问题的solution/workaround是什么?

看起来这是 NextJs 上的一个错误,我们可以发现一些开发人员要求 NextJs 允许我们禁用快速刷新,看起来他们不关心或者只是不想更改它。

所以,我找到了一个第三方库,next-remote-watch,它正在为我解决这个问题。基本上,是替代 next dev 使用的替代脚本,它将快速简单地构建和激活观察者。

package.json使用

"scripts": {
   "start": "next-remote-watch @my-repo/smk"
}