How to setup a Typescript mono-repo with multilevel dependency graph without going through build cycles?

Question

I have a typescript mono-repo containing 3 packages as follows:

• Package A: a React Single-Page-Application which uses packages B and C.
• Package B: a UI library which uses Package C.
• Package C: a utility package with 3rd party dependencies.

My goal is to avoid build cycles after every change in the dependencies during development, hence I'd like to work directly with the typescript source code of packages B and C and possibly enjoy HMR (hot reload).

It's been a long day.

pls skip to the last two paragraphs if you wish to avoid my description of my different attempts so far and jump straight to the question.

My day started with defining the paths field in the tsconfig.json:

{
  "compilerOptions": {
    ...,
    "baseUrl": "../",
    "paths": {
      "@package-b": ["path-to-package-b"],
      "@package-c": ["path-to-package-c"]
    }
  },
}

I quickly realized I had to leave create-react-app behind as it does not support paths alias. Trying to use different CRA rewiring techniques led me to the dreaded invalid hook call which means react does not know how to resolve different versions of react-dom. Tweaking noHoist did not help solving it, nor did symlinking as suggested in their docs.

To summarize the attempts that followed:

• I've tried working with yalc. It seems it still requires a build cycle when used with create-react-app as CRA does not compile dependencies.
• I've tried a custom webpack build. Did not succeed in making it work. Did spend a lot of time making the asset loader recognize my images.
• I gave snowpack a try. Had issues with a 3rd party named @fluentui/react, it failed to compile and led me to an open issue. I realized I had to fork and investigate it to continue and decided to move on.
• I even looked into hard linking directories with bindfs but it seems you need macFuse for it which asks for extensive system extensions privileges during installation.
• I am currently trying vite which like snowpack also supports native esmodules which is promising when you're trying to avoid build cycles.

I am looking for a solution for running a dev environment with any bundler for a root SPA package and multiple typescript packages which depends on each other without fs-watching and going through the build cycles.

Before flagging this question as "primarily opinion based" note that a good answer can help future readers avoid the back and forth attempts I've made today. Even this can be done with any bundler by leveraging this or that option is a good answer in that regard.