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

Importing Asset using new URL(url, import.meta.url) can't resolve '@' alias in dynamic URLs via template literals #12563

Closed
7 tasks done
Chains-Z opened this issue Mar 24, 2023 · 1 comment
Labels
duplicate This issue or pull request already exists

Comments

@Chains-Z
Copy link

Describe the bug

when I importing Asset according to Vite Guide

const imgName = "vue"
const imgUrlAlias = new URL(`@/assets/${imgName}.svg`,import.meta.url).href

I expect imgUrlAlias === 'http://localhost:5173/src/assets/vue.svg'
but what I really get is imgUrlAlias === 'http://localhost:5173/undefined'
if I replace '@/assets/img.png' with './assets/img.png' or '/src/assets/img.png'
I can get the right url 'http://localhost:5173/src/assets/vue.svg'

when I check Source Code from Developer Tools I notice that

const imgUrlAlias = new URL(`@/assets/${imgName}.svg`,import.meta.url).href

is compiled to

const imgUrlAlias = new URL((/* #__PURE__ */ Object.assign({"/src/assets/vue.svg": __vite_glob_0_0}))[`@/assets/${imgName}.svg`], self.location).href;

the assign part Object.assign({"/src/assets/vue.svg": __vite_glob_0_0})) is handled '@' alias correctly
but the index part [`@/assets/${imgName}.svg/`] didn't
I think this may be a bug

Reproduction

https://github.com/Chains-Z/vite-asset-alias-issue

Steps to reproduce

Run npm install followed by npm run dev
You can see that the middle Vue Logo didn't show up
the reproduce code is in App.vue

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700KF
    Memory: 13.07 GB / 31.82 GB
  Binaries:
    Node: 19.4.0 - ~\scoop\apps\nodejs\current\node.EXE
    npm: 9.2.0 - ~\scoop\apps\nodejs\current\npm.CMD
  Browsers:
    Chrome: 111.0.5563.111
    Edge: Spartan (44.22621.963.0), Chromium (111.0.1661.51)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @vitejs/plugin-vue: ^4.1.0 => 4.1.0
    vite: ^4.2.0 => 4.2.1

Used Package Manager

npm

Logs

No response

Validations

@sapphi-red
Copy link
Member

Duplicate of #10597

@sapphi-red sapphi-red marked this as a duplicate of #10597 Mar 24, 2023
@sapphi-red sapphi-red closed this as not planned Won't fix, can't repro, duplicate, stale Mar 24, 2023
@sapphi-red sapphi-red added duplicate This issue or pull request already exists and removed pending triage labels Mar 24, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Apr 8, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

2 participants