rspack/webpack virtual modules can't do relative import

[edemaine]

Environment

[email protected]
Node 23.4.0
Windows 11 version 10.0.26100 Build 26100

Reproduction

Repo: https://github.com/edemaine/unplugin-rspack-relative-import
Run:

• npm install
• npm run build

Error:

> [email protected] build
> rspack build

ERROR in ./node_modules/.virtual/C%3A%5CUsers%5Cedemaine%5CProjects%5Cunplugin-rspack-relative-import%5Csrc%5Cindex.civet.jsx 1:0-21
  × Module not found: Can't resolve './index.css' in 'C:\Users\edemaine\Projects\unplugin-rspack-relative-import\node_modules\.virtual'
   ╭─[1:7]
 1 │ import "./index.css";
   ·        ─────────────
 2 │
 3 │ document.querySelector("#root").innerHTML = `
   ╰────

Describe the bug

From #416 I gather that webpack/rspack virtual modules get put inside node_modules/.virtual. Then the relative import of ./index.css is getting resolved within that directory, which fails.

Additional context

I tried logging calls to resolveId, and I see the following:

resolveId("./src/index.civet", undefined)
resolveId("./index.css", "\C:\Users\edemaine\Projects\Civet\integration\unplugin-examples\rspack\src\index.civet.jsx")

This suggest to me that the virtual prefix is getting stripped incorrectly on Windows; I don't think the leading \ should be there. #421 might be the same issue, and #422 might fix this.

But I don't think that this is the cause for this particular bug. rspack itself isn't going to strip virtual module names; only unplugin will. So rspack is going to resolve relative paths incorrectly, unless they're handled by an unplugin. I'd rather not have my unplugin help resolve all files, only the ones it's supposed to do (.civet).

I guess the workaround is for my unplugin's resolveId to fix the paths for all imports, perhaps when the importer is recognized as something my unplugin generated.

I think a better fix would be to put virtual modules in the same directory as the source file. I understand that the node_modules/.virtual choice was made to avoid it appearing in VSCode or Git. But I don't see how relative imports could work in this scenario.

Let me know what you think and I can try to work on a fix.

[sxzz]

/cc @SoonIter @chenjiahan

[edemaine]

I've also just verified that the same issue occurs in webpack, in a NextJS project. I think these are the two targets that use virtual modules in this way.

[chenjiahan]

@hardfist cc

[hardfist]

the current virtual module implementation in rspack is not ideal and should be implemented on top of compiler.inputFilesystem which will not change the original path so the resolve behavior should not be affected.
but it seems the unplugin-webpack implementation is already using webpack-virtual-modules(which use compiler.inputFilesystem), so webpack virtual module should works fine, @edemaine do you verify that webpack has same problem now?

[edemaine]

@hardfist Thanks for your response. Yes, verified. I just built a clear production repo: https://github.com/edemaine/unplugin-rspack-relative-import
I get this error during npm run build:

> build
> npx webpack build

assets by status 523 bytes [cached] 2 assets
./_virtual_C%3A%5CUsers%5Cedemaine%5CProjects%5Cunplugin-webpack%5Csrc%5Ci...(truncated) 178 bytes [built] [code generated]

ERROR in ./_virtual_C%3A%5CUsers%5Cedemaine%5CProjects%5Cunplugin-webpack%5Csrc%5Cindex.civet.jsx 1:0-20
Module not found: Error: Can't resolve './index.css' in 'C:\Users\edemaine\Projects\unplugin-webpack'
resolve './index.css' in 'C:\Users\edemaine\Projects\unplugin-webpack'
  using description file: C:\Users\edemaine\Projects\unplugin-webpack\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\edemaine\Projects\unplugin-webpack\package.json (relative path: ./index.css)
      .civet
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\edemaine\Projects\unplugin-webpack\index.css.civet doesn't exist
      Field 'browser' doesn't contain a valid alias configuration
      C:\Users\edemaine\Projects\unplugin-webpack\index.css doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\edemaine\Projects\unplugin-webpack\index.css.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\edemaine\Projects\unplugin-webpack\index.css.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\edemaine\Projects\unplugin-webpack\index.css.wasm doesn't exist
      as directory
        C:\Users\edemaine\Projects\unplugin-webpack\index.css doesn't exist

With webpack, the virtual modules seem to resolve to the root directory of the project (instead of node_modules/.virtual as in rspack). If I move index.css to the project root directory, the import works, but shouldn't: the import is from a file within the src subdirectory.

[hardfist]

I'm not sure whether it's a unplugin bug or civet plugin bug
it actually resolved to right css path

but then the right resolved path is thrown away
https://github.com/DanielXMoore/Civet/blob/0d97621082c7c0d2201d57498816b67ad95e8838/source/unplugin/unplugin.civet#L399

[hardfist]

after some investigation, I think the root cause is here https://github.com/unjs/unplugin/blob/main/src/webpack/index.ts#L123, and it's very tricky to move virtual module path to node_modules/.virtual, I'm gonna try to align webpack's implementation with rollup's and don't change the original directory folder to support virtual module, but i may take some time