“Failed to construct 'URL': Invalid URL” in v2.9.1

[JackieCheung]

Describe the bug

After upgrading to [email protected], new URL and import.meta.URL was failed.
It occurred an error as Uncaught TypeError: Failed to construct 'URL': Invalid URL.
The src of img cannot be inferred correctly. But in [email protected] everything went well.

raw code

used in .ts

<img src="${
  new URL('../assets/images/loading/loading.gif', import.meta.url).href
}" alt=''>

compiled code

• [email protected]

<img src="${new URL("/front/assets/loading.c075df69.gif",self.location).href}" alt=''>
The src of img is "http://192.168.1.159/front/assets/loading.c075df69.gif" which is correct

• [email protected]

<img src="${new URL("../assets/images/loading/loading.gif",Jo.url).href}" alt=''>

Reproduction

https://stackblitz.com/edit/vitejs-vite-viades?file=src%2Fmain.ts&terminal=dev.
Run npm run build && npm run preview, the first image asset can't be found as import.meta.url is in the template string.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz
    Memory: 1.23 GB / 15.79 GB
  Binaries:
    Node: 16.13.1 - C:\Softwares\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Softwares\nodejs\node_global\yarn.CMD
    npm: 7.20.2 - C:\Softwares\nodejs\node_global\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.55)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-vue: ^2.2.4 => 2.3.1
    vite: ^2.9.1 => 2.9.1

Used Package Manager

pnpm

Logs

Uncaught TypeError: Failed to construct 'URL': Invalid URL

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/core 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.

[JackieCheung]

After Set build-target and optimizedeps.esbuildoptions.target to es2020, the error disappeared, but the src of img is "http://192.168.1.159/front/assets/images/loading/loading.gif", it still incorrect, the correct src is "http://192.168.1.159/front/assets/loading.c075df69.gif" in [email protected].

[github-actions]

Hello @JackieCheung. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[catnuko]

I have the same bug in [email protected] and [email protected] building,import.meta is empty object.

[JackieCheung]

I have the same bug in [email protected] and [email protected] building,import.meta is empty object.

In my case, everything was good before version @2.8.6, this problem occurs after upgrading to @2.9.1. Refer to this PR although set build-targe and optimizedeps.esbuildoptions.target to es2020, the error disappeared, but the src of img cannot hash correctly as I described above.

[fi3ework]

I made a reproduction https://stackblitz.com/edit/vitejs-vite-viades?file=src%2Fmain.ts&terminal=dev. Run npm run build && npm run preview, the first image asset can't be found as import.meta.url is in the template string. I find #7650, it should fix the issue after refactoring the regex utils. I also made a quick fix for this issue fi3ework@c400f87 before I found #7650 😅. It's a rough fix for template string and I think it can handle most cases for now. I would like to come up with a PR if we would like to make a quick fix before #7650 landed.

[JackieCheung]

I made a reproduction https://stackblitz.com/edit/vitejs-vite-viades?file=src%2Fmain.ts&terminal=dev. Run npm run build && npm run preview, the first image asset can't be found as import.meta.url is in the template string. I find #7650, it should fix the issue after refactoring the regex utils. I also made a quick fix for this issue fi3ework@c400f87 before I found #7650 😅. It's a rough fix for template string and I think it can handle most cases for now. I would like to come up with a PR if we would like to make a quick fix before #7650 landed.

Thank you for your reproduction. I have updated my comment.

[doutatsu]

Can confirm - having the same issue 😢

[yumcc-com]

Set build-target和optimizedeps.esbuildoptions.target后es2020，错误消失了，但是srcimg的是"http://192.168.1.159/front/assets/images/loading/loading.gif"，还是不正确，正确的src"http://192.168.1.159/front/assets/loading.c075df69.gif"在[email protected]。

I'm in the same boat. How do you solve it ? 😢

[JackieCheung]

Set build-target和optimizedeps.esbuildoptions.target后es2020，错误消失了，但是srcimg的是"http://192.168.1.159/front/assets/images/loading/loading.gif"，还是不正确，正确的src"http://192.168.1.159/front/assets/loading.c075df69.gif"在[email protected]。

I'm in the same boat. How do you solve it ? 😢

change to use dynamic import, such as

import loadingGif from '@/assets/images/loading/loading.gif'
div.innerHTML = `<div class='fullscreen-loading'>
  <img src="${loadingGif}" alt=''>
</div>`

or change to not use template string, such as

const loadingGif = new URL('../assets/images/loading/loading.gif', import.meta.url).href;
div.innerHTML = `<div class='fullscreen-loading'>
  <img src="${loadingGif}" alt=''>
</div>`

Hope to help you.

[yumcc-com]

Set build-target和optimizedeps.esbuildoptions.target后es2020，错误消失了，但是srcimg的是"http://192.168.1.159/front/assets/images/loading/loading.gif"，还是不正确，正确的src"http://192.168.1.159/front/assets/loading.c075df69.gif"在[email protected]。

I'm in the same boat. How do you solve it ? 😢

change to use dynamic import, such as

import loadingGif from '@/assets/images/loading/loading.gif'
div.innerHTML = `<div class='fullscreen-loading'>
  <img src="${loadingGif}" alt=''>
</div>`

or change to not use template string, such as

const loadingGif = new URL('../assets/images/loading/loading.gif', import.meta.url).href;
div.innerHTML = `<div class='fullscreen-loading'>
  <img src="${loadingGif}" alt=''>
</div>`

Hope to help you.

Your answer was a great help to me. Thank you so much ! 👍