Vite does not revalidate inline scripts on page reloads

[Kapelianovych]

👋 I am creating a simple plugin which transforms HTML and that HTML is expected to have simple <script type="module"> tags (without src attribute). Vite in dev mode extracts them to virtual module, as I understood, with the following example URL /index.html?html-proxy&index=0.js (every module has its own sequential number as name). That's okay, it works... until I reload the page. The thing is: HTML changes every time browser asks for the page. And the content of the inline script changes as well. While browser receives the fresh HTML, it does not receive the fresh JS file (updated content). URL to JS is always the same and I made sure to disable cache in browser to always fetch files from the dev server. I suspect that Vite caches the virtual module created from inline script and for some reason never revalidate it. Also, I tried to debug Vite by myself to figure out the reason, but I am unlucky and debugger did not want to simply stop at the debugger statement inside the middleware which transforms the HTML :(

P.S.: if I make a change in the HTML file, the next block of code makes sure the JS file is invalidated, so the latest content is pushed to the browser.

handleHotUpdate({ server }) {
  server.ws.send({ type: "full-reload" });
  server.moduleGraph.invalidateAll();

  return [];
}

[Kapelianovych]

Adding the server.moduleGraph.invalidateAll(); line to the server.middlewares.use callback fixes the problem, but I hoped for a better solution.

configureServer(server) {
  return () => {
    server.middlewares.use((req, res, next) => {
      // ...
      server.moduleGraph.invalidateAll();
      // ...
      next();
    });
  };
}

[hi-ogawa]

I am creating a simple plugin which transforms HTML

Would it help if you add enforce: true in your plugin? It would make it easier to understand the issue if you can provide a reproduction.

[Kapelianovych]

@hi-ogawa Thanks for the response. Yes, the enforce: 'pre' sits in the plugin for a long time now. I tried the boolean value and it did not help.
I managed to create a super small reproduction here (surprisingly it took a lot less time than I imagined 😀).

[hi-ogawa]

Thanks for the concise repro. From a quick look, this could be a bug. I see plugin's transformIndexHtml hook is called for each html request but corresponding js proxy module isn't always invalidated (though it looks like they are invalidated after editing html?).
Probably it's worth raising an issue if you don't see one already.

EDIT: maybe this will fix it #18696

[Kapelianovych]

Thanks a lot ❤️
I am going to wait for your PR to get accepted. If needed, I can convert this discussion to issue (I saw the button in UI at least).