with vue cannot use import.meta.url object directly - new URL(url, import.meta.url) -

[eltorio]

Describe the bug

With vue 3.2.44
in main.ts this code fail to run

const useImage = (url: string) => {
    return new URL(`/src/${url}`, import.meta.url).href;
  };

this code compiles but does not have the correct behavior (see https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url )

const baseUrl = import.meta.url
const useImage = (url: string) => {
    return new URL(`/src/${url}`, baseUrl).href;
  };

I opened an issue on vue/core but it is related to vite
see original post vuejs/core#7093

Reproduction

https://github.com/eltorio/vue-sfc-bug

Steps to reproduce

git clone https://github.com/eltorio/vue-sfc-bug.git
cd vue-sfc-bug
npm i
npm run dev

repository was created with

npm init vue@latest  # with typescript router pinia -no test (name is vue-sfc-bug
cd vue-sfc-bug
npm i

edit main.ts

const useImage = (url: string) => {
    return new URL(`/src/${url}`, import.meta.url).href;
  };

edit tsconfig.json

{
    compilerOptions": {
    "module": "esnext",
    }
}

run npm run dev and see error:

12:04:38 PM [vite] Internal server error: At least one <template> or <script> is required in a single file component.
  Plugin: vite:vue
  File: /Users/name/Development/vue-sfc-bug/src/views/HomeView.vue
      at Object.parse (/Users/name/Development/vue-sfc-bug/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:5225:21)
      at createDescriptor (/Users/name/Development/vue-sfc-bug/node_modules/@vitejs/plugin-vue/dist/index.cjs:65:43)
      at transformMain (/Users/name/Development/vue-sfc-bug/node_modules/@vitejs/plugin-vue/dist/index.cjs:2216:34)
      at TransformContext.transform (/Users/name/Development/vue-sfc-bug/node_modules/@vitejs/plugin-vue/dist/index.cjs:2705:16)
      at Object.transform (file:///Users/name/Development/vue-sfc-bug/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:40224:44)

I created a second branch with this small diff for reproduction
non working: https://github.com/eltorio/vue-sfc-bug
compiling but bad behavior: https://github.com/eltorio/vue-sfc-bug/tree/workaround

#on branch workaround
git diff main

diff --git a/src/main.ts b/src/main.ts
index 79771e5..2b91996 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,8 +6,9 @@ import router from './router'
 
 import './assets/main.css'
 
+const baseUrl = import.meta.url
 const useImage = (url: string) => {
-    return new URL(`/src/${url}`, import.meta.url).href;
+    return new URL(`/src/${url}`, baseUrl).href;
   };
   
 const app = createApp(App)

System Info

System:
    OS: macOS 13.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 101.22 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 107.1.45.118
    Chrome: 107.0.5304.110
    Firefox: 106.0.5
    Safari: 16.1
  npmPackages:
    vue: ^3.2.44 => 3.2.44

Used Package Manager

npm

Logs

12:04:38 PM [vite] Internal server error: At least one <template> or <script> is required in a single file component.
  Plugin: vite:vue
  File: /Users/name/Development/vue-sfc-bug/src/views/HomeView.vue
      at Object.parse (/Users/name/Development/vue-sfc-bug/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:5225:21)
      at createDescriptor (/Users/name/Development/vue-sfc-bug/node_modules/@vitejs/plugin-vue/dist/index.cjs:65:43)
      at transformMain (/Users/name/Development/vue-sfc-bug/node_modules/@vitejs/plugin-vue/dist/index.cjs:2216:34)
      at TransformContext.transform (/Users/name/Development/vue-sfc-bug/node_modules/@vitejs/plugin-vue/dist/index.cjs:2705:16)
      at Object.transform (file:///Users/name/Development/vue-sfc-bug/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:40224:44)

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

[eltorio]

In fact this bug occurred on each

new URL(x, import.meta.url)

may be due to regex

/\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\s*\)/g

in

vite/packages/vite/src/node/plugins/assetImportMetaUrl.ts

Lines 40 to 41 in 9c808cd

	const assetImportMetaUrlRE =
	/\bnew\s+URL\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*,\s*import\.meta\.url\s*,?\s*\)/g

[eltorio]

my actual ugly workaround is to create a @/plugins/viteHelper.ts ( I defined @ as src path alias for vue-cli compatibility)
in it:

/**
 * 
 * @param url absolute path of asset (must begin with @/assets/)
 * @returns a vite transformed url string
 */
export function $require(url:string):string{
    return new URL(`../assets/${url.replace('@/assets/','')}`,import.meta.url).href
  }

and in my .vue files

<template>
                <span v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :id="`sp-${locale}`">
                    <img @click="changeLang(locale)" class="cursor-pointerw-6 h-6" :alt="locale"
                        :src="$require(`@/assets/lang/${locale.substring(3).toLowerCase()}.svg`)" />
                </span>
</template>
<script setup lang="ts">
import { $require } from '@/plugins/viteHelper.js'
// … rest of code
</script>