Skip to content

Fails to hmr accept virtual modules #12912

@Janpot

Description

@Janpot

Describe the bug

I'm trying to hot reload a virtual module, but it doesn't seem to be able to accept it:

// server.mjs
import { createServer } from "vite";

async function main() {
  const devServer = await createServer({
    clearScreen: false,
    plugins: [
      {
        name: "my-plugin",
        async resolveId(id) {
          if (id === "virtual:my-plugin:foo") {
            return "\0virtual:my-plugin:foo";
          }
          return null;
        },
        async load(id) {
          if (id === "\0virtual:my-plugin:foo") {
            return `export default Math.random();`;
          }
          return null;
        },
      },
    ],
  });

  await devServer.listen(3000);
  devServer.printUrls();

  setInterval(() => {
    const mod = devServer.moduleGraph.getModuleById("\0virtual:my-plugin:foo");
    if (mod) {
      console.log("reloading virtual module");
      devServer.reloadModule(mod);
    }
  }, 2000);
}

main();
// bar.js
export default Math.random();
// main.js
import foo from "virtual:my-plugin:foo";
import bar from "./bar";

console.log("loading foo ", foo);
console.log("loading bar ", bar);

if (import.meta.hot) {
  import.meta.hot.accept("virtual:my-plugin:foo", (newFoo) => {
    console.log(`hmr accepting ${newFoo.default} from "virtual:my-plugin:foo"`);
  });

  import.meta.hot.accept("./bar", (newBar) => {
    console.log(`hmr accepting ${newBar.default} from "./bar"`);
  });
}

Reproduction

https://github.com/Janpot/vitejs-virtual-hmr

Steps to reproduce

  1. run yarn && yarn dev
  2. open browser to http://localhost:3000
  3. open console
  4. observe the page reloading when the interval fires
  5. try the same but for the real module: const mod = devServer.moduleGraph.getModuleById(path.resolve("./src/bar.js"));
  6. observe the module being hot accepted

I tried using /@id/__x00__virtual:my-plugin:foo, but that doesn't work neither

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M1
    Memory: 101.66 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.0/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.121
    Firefox: 111.0.1
    Safari: 16.4
  npmPackages:
    vite: ^4.3.0-beta.2 => 4.3.0-beta.8

Used Package Manager

yarn

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: hmrp3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions