Can not dynamically import a raw file in production mode.

[leon-kfd]

Describe the bug

Can not dynamically import a raw file in production mode.
But it can work in dev mode.

Main code:

Run build & server, it happen:

Reproduction

https://github.com/leon-kfd/vite-dynamic-import-raw-file

Reproduction:

yarn
npm run build
npm run serve

Click load file button, will throw error in console.

System Info

System:
    OS: Windows 10 10.0.18362
    CPU: (6) x64 Intel(R) Core(TM) i5-9400 CPU @ 2.90GHz
    Memory: 6.24 GB / 15.86 GB
  Binaries:
    Node: 14.15.1 - D:\Software\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.8 - D:\Software\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.124
    Edge: Spartan (44.18362.1.0)
    Internet Explorer: 11.0.18362.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.5 => 1.2.5
    vite: ^2.4.2 => 2.4.2

Used Package Manager

yarn

Logs

no error log

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.

[dejour]

current situation is glob pattern transformed by @rollup/plugin-dynamic-import-vars (./source/file*.md?raw) can't match any files, maybe you could work around this by using a js file which return markdown string.

[Sociosarbis]

The problem originates from @rollup/plugin-dynamic-import-vars in build mode.

This plugin converts dynamic import expression with variables (which is not static) to string (say string A) with asterisks .

Then glob with string A to search the actual files to import.

But glob does not support query (?raw in this case).

You can visit here for the related code.

The following is what this plugin would generate.

I think vite can implement its own plugin-dynamic-import-vars to fix the bug, as the current one doesn't seem to be flexible enough to handle more future cases.

@leon-kfd At this time, consider use vite-plugin-plain-text (which is included in the awesome-vue collection) as a workaround.

[mesqueeb]

I have the same issue. +1 for supporting this in Vite and VitePress.

[mesqueeb]

duplicate of #3222

[theonelucas]

My temporary "solution" was to just fetch the content with a get and read it as text. As I'm fetching svg icons, I couldn't just use them as the src of an image cause that way they wouldn't be editable. It's a horrible hack, but at least it's the same behavior in dev and prod...

    const response = await fetch(`${this.CDN}/assets/icons/${this.icon}.svg`);
    const text = await response.text();`