T
TanStack•10mo ago
extended-salmon

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
genetic-orange
genetic-orange•10mo ago
cc @Nicolas Beaussart
unwilling-turquoise
unwilling-turquoise•10mo 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
extended-salmon
extended-salmonOP•10mo ago
Ah, ok. Thanks or the answer.
flat-fuchsia
flat-fuchsia•9mo 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?