question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vite should stop appending `?import` for data URLs

See original GitHub issue

Describe the bug

Vite injects ?import query to data URL in dynamic import calls, which should be unexpected.

Reproduction

const blob = new Blob([/* */], { type: '...' })
const url = URL.createObjectURL(blob)

;(async () => {
  await import(/* @vite-ignore */ url) // <== Vite injects `?import` query here.
})()

I hope if we add @vite-ignore magic comment, Vite won’t inject ?import query, otherwise it will break the URL and cause failing to load such resources.

The code of Vite below will mark “needs inject query”: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/importAnalysis.ts#L412

Then, Vite will inject at runtime: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/importAnalysis.ts#L413

I hope we can add a detection:

if (!hasViteIgnore) {
  needQueryInjectHelper = true
  str().overwrite(start, end, `__vite__injectQuery(${url}, 'import')`)
}

Edit: My another solution is to skip adding queries for URLs which start with blob: and data: at both compile-time and runtime.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 5.11 Arch Linux
    CPU: (8) x64 AMD Ryzen 5 2500U with Radeon Vega Mobile Gfx
    Memory: 1.85 GB / 6.75 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.12.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 7.6.3 - /usr/bin/npm
  Browsers:
    Firefox: 86.0.1
  npmPackages:
    @vitejs/plugin-vue: ^1.1.5 => 1.1.5 
    vite: ^2.1.0 => 2.1.2

Used package manager: npm

Logs



Before submitting the issue, please make sure you do the following

  • 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.
  • Provide a description in this issue that describes the bug.
  • 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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
g-planecommented, Mar 24, 2021

Minimal reproduction repository: https://github.com/rosaric/vite-bug-repro .

1reaction
g-planecommented, Mar 26, 2021

Can I attempt to open a PR that adds a processing for URLs start with data: or blob:?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Features | Vite
Rewrite the imports to valid URLs like /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd so that the browser can import them properly. Dependencies are Strongly ...
Read more >
Build Options - Vite
import.meta.url is used at runtime to avoid absolute paths that depend on the ... the sourcemap will be appended to the resulting output...
Read more >
Configuring Vite
Importing them from JS will return their resolved URL string (this can be overwritten if you have a enforce: 'pre' plugin to handle...
Read more >
Backend Integration - Vite
Make sure the server is configured to proxy static assets requests to the Vite server; Set server.origin so that generated asset URLs will...
Read more >
Plugin API - Vite
Users will add plugins to the project devDependencies and configure them using the ... \0 is not a permitted char in import URLs...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found