T
TanStack•7mo ago
provincial-silver

Monorepo-examples and HMR

I'm new to monorepos and tried the router-monorepo-react-query-example. Is it possible to get HMR when changing the components in post-feature-package?
4 Replies
noble-gold
noble-gold•7mo ago
cc @Nicolas Beaussart
exotic-emerald
exotic-emerald•7mo ago
It's possible, but you need to have no build step between libs and app, that means having the .ts reference in the package.json of the feature lib That comes with tradeoff, you'd need to have the same vite / ts / third parties libs across the monorepo
provincial-silver
provincial-silverOP•7mo ago
Ah, ok. Thanks or the answer.
deep-jade
deep-jade•7mo ago
Not familiar with router-monorepo-react-query-example but I have a monorepo project that I am building with a web client using tanstack query/router/start. Using pnpm and workspace dependencies and package.json exports with HMR and no build step. so my web project that depends on other monorepo packages (like component libraries) looks like 
"dependencies": {
  "config": "workspace:*",
  "shared": "workspace:*",
  "sygaldry": "workspace:*",
  "utils": "workspace:*",
  // ...
}
"dependencies": {
  "config": "workspace:*",
  "shared": "workspace:*",
  "sygaldry": "workspace:*",
  "utils": "workspace:*",
  // ...
}
Then in sygaldry for example, which is my component library I have 
// packages/sygaldry/package.json
"exports": {
    "./components": {
      "import": "./src/components/index.ts"
    },
    "./hooks": {
      "import": "./src/hooks/index.ts"
    },
    "./utils": {
      "import": "./src/utils/index.ts"
    },
    "./styles/*.css": "./src/styles/*.css"
  },
// packages/sygaldry/package.json
"exports": {
    "./components": {
      "import": "./src/components/index.ts"
    },
    "./hooks": {
      "import": "./src/hooks/index.ts"
    },
    "./utils": {
      "import": "./src/utils/index.ts"
    },
    "./styles/*.css": "./src/styles/*.css"
  },
because of how pnpm works (hard links), changes inside of a workspace dependency get updated in the parent projects node_modules, so no need for something like build:watch to trigger changes HMR just picks up the changes automatically

Did you find this page helpful?