Search code examples
reactjsnext.jsfast-refresh

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

I have an application built with NextJs (and React) and mobx-state-tree (but could be context or redux) as a package manager. All the stores are created and handled in an npm package called SMK (state management kit) that I created to make the sub-stores reusable in my mobile and web application.

How it works:

  1. Create the sub-store with models, actions and views on the SMK and export it as a module.
  2. Add the SMK using yarn add @my-repo/smk.
  3. Create the root store in my app and import the sub-store from SMK as a child of the root store.
  4. Build and start the app and everything is working well.

But I need to run and publish the SMK locally to make it easier development. The solution I used to use is yalc.

Using yalc and running it locally this is the process:

  1. In the SMK, runs yarn start. (This will do nodemon --ignore src/index.ts -e js,ts,tsx,json --watch src/ --exec yalc push --scripts)
  2. In the APP, runs yalc add @my-repo/smk. (This will add a dependency like "@my-repo/smk": "file:.yalc/@my-repo/smk").
  3. In the APP, runs yarn build and then yarn start

And voila! Everything is working perfect, any change I did locally on my SMK is working perfectly on the APP.

BUT, when I run yarn dev that do next dev as default of NextJs it doesn't work.

This is the error I'm facing: enter image description here

Error explanation: As I only added the setTestingState and testingState locally, it's saying that it doesn't exist.

Possible reason: The fast refresh is not refreshing the cache properly.

I've tried:

  • Add // @refresh reset to force it, but didn't work.
  • Stop and start the application.
  • Build, start and then run dev. (works for build and not for dev)

What is the solution/workaround to solve this issue with yarn dev and yalc?

Solution

  • Looks like it's a bug on NextJs and we can find some devs asking to NextJs to allow us to disable the Fast Refresh, and looks like they don't care or just don't have the intention to change it.

    So, I found a third-party library, next-remote-watch, that is solving this issue for me. Basically, is an alternative script to use instead of next dev and it will do a quick and simply build and active a watcher.

    At package.json use

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