When using "Dynamic Routes" to render raw content, how to keep hot reload working.

[chiaweilee]

It didn't work.

import fs from 'fs';
import path from 'path';

export default {
  paths: [{
    content: fs.readFileSync(target, 'utf-8'), // raw markdown from another file *.md
  }],
};

<!-- @content -->

[brc-dd]

Currently not possible without custom watcher or weird hacks. If you just want to include markdown files, you can use - https://vitepress.dev/guide/markdown#markdown-file-inclusion

Simpler hack if you want to keep using path loaders, you can append something like this to your content `\n<!--@include: @/path/to/target.md{0,0}-->`

[jianxing-xu]

[email protected]

[name].paths.ts

import fs from "fs";
import path from "path";
import { defineRoutes } from "vitepress";

const regex = /components\/([^/]+)/;

export default defineRoutes({
  watch: [path.resolve(process.cwd(), "../ui/components/*/README.en.md")],
  paths(watchFiles) {
    console.log("en rebuild", watchFiles);
    const paths = watchFiles.filter((p) => {
      const last = p.split("/").pop();
      return !last?.startsWith("_") && !last?.endsWith("ts");
    });
    const demos = paths.map((p) => {
      const content = fs.readFileSync(p, "utf-8");
      const match = p.match(regex);
      const componentName = match?.[1];
      return {
        componentName,
        content,
      };
    });
    return demos.map((d) => ({
      params: { name: d.componentName as string },
      content: d.content,
    }));
  },
});

<!-- @content -->

HMR cannot be triggered when the watch file is updated @brc-dd

[brc-dd]

Can you share the repo? also which OS are you on? I hadn't checked stuff on Windows, so there might be some issues with slashes.

[jianxing-xu]

https://github.com/jianxing-xu/vitepress-pr-4569-test @brc-dd I initialized a repository and modified the version to 2.0.0-alpha.3

• System: Linux LAPTOP-P6V9BKRB 5.15.167.4-microsoft-standard-WSL2 SMP Tue Nov 5 00:21:55 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

---

and I use [name].paths.ts and the error appears

vitepress dev

Failed to load /home/jianxing/space/vitepress-p-4569/@test/[name].paths.ts:
require() of ES Module /home/jianxing/space/vitepress-p-4569/@test/node_modules/.pnpm/vitepress@2.0.0-alpha.3_@algolia+client-search@5.20.3_@types[email protected][email protected][email protected]/node_modules/vitepress/dist/node/index.js from /home/jianxing/space/vitepress-p-4569/@test/[name].paths.ts not supported.
Instead change the require of index.js in /home/jianxing/space/vitepress-p-4569/@test/[name].paths.ts to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/jianxing/space/vitepress-p-4569/@test/node_modules/.pnpm/vitepress@2.0.0-alpha.3_@algolia+client-search@5.20.3_@types[email protected][email protected][email protected]/node_modules/vitepress/dist/node/index.js from /home/jianxing/space/vitepress-p-4569/@test/[name].paths.ts not supported.
Instead change the require of index.js in /home/jianxing/space/vitepress-p-4569/@test/[name].paths.ts to a dynamic import() which is available in all CommonJS modules.
at require.extensions. [as .js] (file:///home/jianxing/space/vitepress-p-4569/@test/node_modules/.pnpm/[email protected]@types[email protected]/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:54626:9)
at Object. (/home/jianxing/space/vitepress-p-4569/@test/[name].paths.ts:37:24)
at require.extensions. [as .js] (file:///home/jianxing/space/vitepress-p-4569/@test/node_modules/.pnpm/[email protected]@types[email protected]/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:54624:16)
Port 5173 is in use, trying another one...

I use the .mts suffix to be fine

[jianxing-xu]

Awsome thanks!

[brc-dd]

hmm, it's not because of isMatch. it's because vite doesn't watch files outside project root. which makes sense, but checking if there is any way to customize which files to watch.

in your particular case, you can probably move .vitepress directory outside @test and configure rewrites.

[jianxing-xu]

I pushed some updates, I created button.vue in the ui directory, and then referenced it in button.md. The hmr of button.vue works normally, and button.vue is also a file outside the root directory of the project

[brc-dd]

ah that's because it is imported

You can add some plugin like this in .vitepress/config.mts:

  vite: {
    plugins: [
      {
        name: 'watch-ui',
        configureServer(server) {
          server.watcher.add(path.resolve(process.cwd(), '../ui')) // glob is not working here for some reason, watch the whole directory instead
        }
      }
    ]
  }

And use the version on main - (pnpm add -D https://pkg.pr.new/vitepress@e271695):

Screen.Recording.2025-02-27.at.3.14.18.PM.mov

It might be possible to add patterns in watch array by default to watcher too. I'll take a look 👀

looks like glob are disabled by default (vite.server.watch.disableGlobbing) since it breaks when there are brackets in paths (vitejs/vite#2179)

[jianxing-xu]

It worked, Thank you!