Vue version

3.2.44

Link to minimal reproduction

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

Steps to reproduce

clone the repo, install and run it

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",
    }
}

What is expected?

Compile (as it works with 3.2.41)

What is actually happening?

compile error with 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)

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

Any additional comments?

No response

It seems to be related to #6781

The main problem is that the compiler treat main.ts as a SFC but it is not. The problem is definitely a parsing problem because this code is working !!!!!

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

this is my current workaround

I created a second branch with this small diff for reproduction non working: https://github.com/eltorio/vue-sfc-bug working: 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)

Seems like vite's issue:

It seems to be related to the code here

https://github.com/vitejs/vite/blob/9c808cdec89b807bff33eef37dfbb03557291ec1/packages/vite/src/node/plugins/assetImportMetaUrl.ts#L40-L41

Thanks for the detective work!

Closing this as it needs to be adressed in the Vite repo, not here. If you haven't already, please open an issue there.