Vue version

3.3.2

Steps to reproduce

This issue was introduced with latest Vue, so is a breaking change if intentional.

When importing a component into a TS file and passing to another object:

import MyComponent from './MyComponent.vue'

// later 
const myObject = new SomeClass({el: MyComponent})

Using latest vite/vue this now creates the error:

11:03:31 AM [vite] Internal server error: __name is not defined
  Plugin: vite:vue
  File: /www/src/pages/ElLogo.vue
      at SortTemplate (eval at cloneSort (/core/node_modules/.pnpm/source-map-js@1.0.2/node_modules/source-map-js/lib/quick-sort.js:2:848), <anonymous>:3:107)
      at cloneSort (/core/node_modules/.pnpm/source-map-js@1.0.2/node_modules/source-map-js/lib/quick-sort.js:112:10)
      at exports.quickSort (/core/node_modules/.pnpm/source-map-js@1.0.2/node_modules/source-map-js/lib/quick-sort.js:128:19)
      at BasicSourceMapConsumer.SourceMapConsumer_parseMappings (/core/node_modules/.pnpm/source-map-js@1.0.2/node_modules/source-map-js/lib/source-map-consumer.js:604:9)
      at BasicSourceMapConsumer.get (/core/node_modules/.pnpm/source-map-js@1.0.2/node_modules/source-map-js/lib/source-map-consumer.js:70:12)
      at BasicSourceMapConsumer.SourceMapConsumer_eachMapping (/core/node_modules/.pnpm/source-map-js@1.0.2/node_modules/source-map-js/lib/source-map-consumer.js:136:23)
      at mapLines (/core/node_modules/.pnpm/@vue+compiler-sfc@3.3.2/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3671:18)
      at doCompileTemplate (/core/node_modules/.pnpm/@vue+compiler-sfc@3.3.2/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3643:13)
      at Object.compileTemplate (/core/node_modules/.pnpm/@vue+compiler-sfc@3.3.2/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3586:12)
      at compile (file:///core/node_modules/.pnpm/@vitejs+plugin-vue@4.2.3_vite@4.3.5_vue@3.3.2/node_modules/@vitejs/plugin-vue/dist/index.mjs:163:35)
__name is not defined

System Info

Node 18.6, Mac

Any additional comments?

Hoping for a quick resolution to this issue, if there is a debate about this or problem with reproduction, i will create one.

Could you provide a runnable minimal reproduction?

@arpowers temp solution:

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, 'name', { value, configurable: true });
globalThis.__name = __name;

Add this line in top of vite.config.mts or some of other your code before run vite

@xiaoxiangmoe i've downgraded vue back to 3.2.X ... did you hit the same problem?

@edison1105 yes, i can put one together if this is an isolated issue...

@xiaoxiangmoe can confirm that the temp solution did patch it

@edison1105 i tried for an hour to recreate this and struck out, gonna take some time to isolate whats causing it (vite vue plugin?)

@edison1105 @yyx990803 possible to get any suggestions on what might causing this? im struggling to duplicate in a minimal environment... will take me quite a bit of trial and error with packages, vite configs.

I catch it.

In any vue 3.3.2 project. Add file

// file: run-vite.mts
import * as vite from 'vite'

const root = process.cwd()

async function main() { 
   const viteDevServer = await vite.createServer({
        root,
        logLevel:  'info',
        server: {
            middlewareMode: false,
            hmr: {
                port:6174,
            },
        },
        appType: 'spa',
    })
    
  await viteDevServer.listen()
}

main();

Then run

yarn add tsx
./node_modules/.bin/tsx ./run-vite.mts

Then it throw an error:

[vite] Internal server error: __name is not defined

@arpowers Do you use tsx or something else to run vite?

@xiaoxiangmoe yes! Running tsx ... As a nodejs loader anyway

So, I think it should be a bug of tsx.

@xiaoxiangmoe good work!

@edison1105 duplicated the issue here: https://github.com/arpowers/vite-example

Is related to tsx

Probably related to our addition of vue/jsx-runtime? Although I have no idea how this could cause tsx to compile things differently. Closing as I don't think there's anything actionable on our side (happy to reopen if otherwise)

@yyx990803 Here is a minimal reproduction for why tsx or esbuild will break @vue/compiler-sfc

demo: esbuild break @vue/compiler-sfc's depedency node_modules/source-map-js/lib/quick-sort.js

@xiaoxiangmoe which library has the bug?

Using source-map-js with tsx or using source-map-js with esbuild with option "keepNames": true

@xiaoxiangmoe @arpowers Have you solved it? I also encountered this problem， In CICD. local is OK. https://github.com/lixiaofa/fast-plus/actions/runs/5443372337/jobs/9900013548

I catch it.

In any vue 3.3.2 project. Add file

// file: run-vite.mts
import * as vite from 'vite'

const root = process.cwd()

async function main() { 
   const viteDevServer = await vite.createServer({
        root,
        logLevel:  'info',
        server: {
            middlewareMode: false,
            hmr: {
                port:6174,
            },
        },
        appType: 'spa',
    })
    
  await viteDevServer.listen()
}

main();

Then run

yarn add tsx
./node_modules/.bin/tsx ./run-vite.mts

Then it throw an error:

[vite] Internal server error: __name is not defined

I can also reproduce it using esno, but it's working using jiti

Hey @lixiaofa, have you solved this problem? I faced the same with you.

Try this: https://github.com/esbuild-kit/tsx/issues/113#issuecomment-1524164984

@lixiaofa see https://github.com/vuejs/core/issues/8303#issuecomment-1547540436