Assets created from plugin with this.emitFile have broken URL

[mvolfik]

Describe the bug

I created a simple plugin which transforms an image into multiple different sizes and creates a virtual file with mapping of {size: "url"}. The URLs are created with pluginContext.emitFile({"type": "asset", ...}) and the resulting reference is placed in import.meta.ROLLUP_FILE_URL_${ref} as per docs. It works perfectly when building with Rollup, but with Vite (no matter if I use the plugin in build.rollupOptions or in Vite plugins directly), broken code is generated.

Code generated by the plugin:

export default {
  "webp": {
    "200": import.meta.ROLLUP_FILE_URL_2edf41d9,
    "350": import.meta.ROLLUP_FILE_URL_41daaf55,
    "500": import.meta.ROLLUP_FILE_URL_669d124e
  },
  "jpeg": {
    "200": import.meta.ROLLUP_FILE_URL_9002e7da,
    "350": import.meta.ROLLUP_FILE_URL_83815f5e,
    "500": import.meta.ROLLUP_FILE_URL_193750db
  }
}

Rollup output

var assetData = {
  webp: {
    200: new URL("assets/img-200-b9918632.webp", import.meta.url).href,
    350: new URL("assets/img-350-da7c4051.webp", import.meta.url).href,
    500: new URL("assets/img-500-124875f2.webp", import.meta.url).href,
  },
  jpeg: {
    200: new URL("assets/img-200-bffb7620.jpeg", import.meta.url).href,
    350: new URL("assets/img-350-cbc6dca4.jpeg", import.meta.url).href,
    500: new URL("assets/img-500-2d899839.jpeg", import.meta.url).href,
  },
};

export { assetData as a };

Vite output

const e = {};
var r = {
  webp: {
    200: new URL("img-200.b9918632.webp", e.url).href,
    350: new URL("img-350.da7c4051.webp", e.url).href,
    500: new URL("img-500.124875f2.webp", e.url).href,
  },
  jpeg: {
    200: new URL("img-200.bffb7620.jpeg", e.url).href,
    350: new URL("img-350.cbc6dca4.jpeg", e.url).href,
    500: new URL("img-500.2d899839.jpeg", e.url).href,
  },
};
export { r as a };

Reproduction

Repo: https://github.com/mvolfik/symmetrical-train/tree/46722dec52f64b7c8501a2789d33f527e1fea87f

git clone https://github.com/mvolfik/symmetrical-train.git
git checkout 46722dec52f64b7c8501a2789d33f527e1fea87f
pnpm i
pnpm build

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i3-3110M CPU @ 2.40GHz
    Memory: 683.97 MB / 7.35 GB
    Container: Yes
    Shell: 3.1.0 - /usr/bin/fish
  Binaries:
    Node: 14.17.5 - /usr/bin/node
    Yarn: 1.22.11 - ~/.local/bin/yarn
    npm: 7.21.0 - ~/.local/bin/npm
  Browsers:
    Chromium: 92.0.4515.159
    Firefox: 91.0.1
  npmPackages:
    rollup: ^2.56.3 => 2.56.3 
    vite: ^2.4.2 => 2.5.1

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[mvolfik]

I realized that this can be solved by using __VITE_ASSET__${ref}__ instead during the Vite build - see mvolfik/symmetrical-train@fb06e46. This should be noted somewhere in docs (just spent half a day debugging this oops), and I'm curious what's the reason for this, what counterweights making some Rollup plugins incompatible with Vite?

Thanks all for your work <3

[sapphi-red]

Closing as this is fixed by #8665