Vite must be restarted along with browser refresh to pick up new files using import.meta.glob

[brandonroberts]

Describe the bug

I'm using the import.meta.glob here https://github.com/analogjs/analog/blob/main/packages/router to generate routes based on directory of files.

Adding new files is not invalidating the necessary modules, so refreshing the page does not produce a new set of files.

Reproduction

https://github.com/brandonroberts/analog-router-demo

Steps to reproduce

1. Clone repo
2. Run yarn to install dependencies
3. Run yarn dev
4. Copy the src/app/routes/about.ts to src/app/routes/test.ts and change the template
5. Try to visit http://127.0.0.1:5173/test
6. Note the Page Not Found displayed
7. Stop/Restart the development server
8. Hard refresh the page in the browser
9. Try to visit http://127.0.0.1:5173/test
10. Note the page is displayed

The routes can also be updated by changing an existing file in the src/app/routes folder.

System Info

OSX

Used Package Manager

yarn

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[fc]

out of curiosity, if you disable the cache in your browser does that also resolve it? If so, I ran into a similar cache issue recently - https://github.com/vitejs/vite/issues/10561

[itsdouges]

Heya! Do we have any idea where the fix could be in Vite? @brandonroberts can you go into your workaround?

Edit: I've worked around this with the following plugin, which works with HMR. I run my own watcher.

import { watch } from "chokidar";
import type { Plugin } from "vite";

const tempFolderName = join("node_modules", ".triplex");
const tempDir = join(process.cwd(), tempFolderName);
const triplexGlobModule = "triplex-scene-glob";

function forceGlobsHmr(): Plugin[] {
  return [
    {
      name: "triplex/watch-globs",
      configureServer(server) {
        function reloadGlobModule() {
          server.moduleGraph.fileToModulesMap.forEach((mods) => {
            mods.forEach((mod) => {
              if (mod.id?.includes(triplexGlobModule)) {
                server.reloadModule(mod);
              }
            });
          });
        }

        const watcher = watch(tempDir);
        watcher.on("add", reloadGlobModule);
      },
    },
  ];
}

[brandonroberts]

I did something similar also

https://github.com/analogjs/analog/blob/main/packages/platform/src/lib/router-plugin.ts#L30

[itsdouges]

Update on my end: I was able to delete all this code. Instead I used a virtual module that would have its glob be declared at build time, and then it all works as expected when modules are added and removed.

[brandonroberts]

@itsdouges do you have some sample code to share? I'd be interested in removing my workaround also

[MirazMac]

Any updates on this?

[madigan]

@itsdouges Could you share how you did that? I'm running into this issue as well.

[brandonroberts]

Nice!