Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

URL with import.meta.url fails with template string and nonexistent asset #11157

Open
7 tasks done
Toilal opened this issue Dec 2, 2022 · 2 comments · May be fixed by #11233
Open
7 tasks done

URL with import.meta.url fails with template string and nonexistent asset #11157

Toilal opened this issue Dec 2, 2022 · 2 comments · May be fixed by #11233

Comments

@Toilal
Copy link

Toilal commented Dec 2, 2022

Describe the bug

According to docs, vite supports dynamic URLs via template literals

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

Everything was working properly on vite v3.1, but since vite v3.2 there's an issue with this feature when trying to retrieve an inexistant asset URL using a template string.

// vue.svg exists in source tree, no problem here.
const vueSvgStaticUrl = computed(() => {
  return new URL(`../assets/vue.svg`, import.meta.url).href
})

// vue.svg exists in source tree, no problem here when using a template string.
const vueSvgDynamicUrl = computed(() => {
  const name = 'vue'
  return new URL(`../assets/${name}.svg`, import.meta.url).href
})

// invalid.svg doesn't exists in source tree, no problem here.
const invalidSvgStaticUrl = computed(() => {
  return new URL(`../assets/invalid.svg`, import.meta.url).href
})

// invalid.svg doesn't exists in source tree, returne URL is invalid when using a template string.
const invalidSvgDynamicUrl = computed(() => {
  const name = 'invalid'
  return new URL(`../assets/${name}.svg`, import.meta.url).href
})
  <h2>vueSvgStaticUrl: {{ vueSvgStaticUrl }}</h2>
  <h2>vueSvgDynamicUrl: {{ vueSvgDynamicUrl }}</h2>

  <br/>

  <h2>invalidSvgStaticUrl: {{ invalidSvgStaticUrl }}</h2>
  <h2>invalidSvgDynamicUrl: {{ invalidSvgDynamicUrl }}</h2>

Reproduction

https://github.com/Toilal/vite-url-dynamic-repro

Steps to reproduce

run npm install and npm run dev and see output of the 4 computed URLs.

When using vite 3.2.4, the last computed url is not the expected one.

vite 3.2.4
vite-3 2 4

Using vite 3.1.8, it is the expected output.
vite-3 1 8

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-5930K CPU @ 3.50GHz
    Memory: 10.41 GB / 31.16 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.71
    Firefox: 107.0
  npmPackages:
    @vitejs/plugin-vue: ^3.2.0 => 3.2.0 
    vite: <3.3 => 3.2.4

Used Package Manager

npm

Logs

No response

Validations

@Jevon617
Copy link
Contributor

Jevon617 commented Dec 7, 2022

image

@benmccann benmccann changed the title URL with meta.import.url fails with template string and inexistant asset URL with import.meta.url fails with template string and nonexistent asset Apr 26, 2023
@recallwei
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants