[Error 3.3.2] Components as variable = "error: __name is not defined" (TSX related)

[arpowers]

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/[email protected]/node_modules/source-map-js/lib/quick-sort.js:2:848), <anonymous>:3:107)
      at cloneSort (/core/node_modules/.pnpm/[email protected]/node_modules/source-map-js/lib/quick-sort.js:112:10)
      at exports.quickSort (/core/node_modules/.pnpm/[email protected]/node_modules/source-map-js/lib/quick-sort.js:128:19)
      at BasicSourceMapConsumer.SourceMapConsumer_parseMappings (/core/node_modules/.pnpm/[email protected]/node_modules/source-map-js/lib/source-map-consumer.js:604:9)
      at BasicSourceMapConsumer.get (/core/node_modules/.pnpm/[email protected]/node_modules/source-map-js/lib/source-map-consumer.js:70:12)
      at BasicSourceMapConsumer.SourceMapConsumer_eachMapping (/core/node_modules/.pnpm/[email protected]/node_modules/source-map-js/lib/source-map-consumer.js:136:23)
      at mapLines (/core/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3671:18)
      at doCompileTemplate (/core/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3643:13)
      at Object.compileTemplate (/core/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:3586:12)
      at compile (file:///core/node_modules/.pnpm/@[email protected][email protected][email protected]/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.

[edison1105]

Could you provide a runnable minimal reproduction?

[xiaoxiangmoe]

@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

[arpowers]

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

[arpowers]

@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?)

[arpowers]

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

[xiaoxiangmoe]

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

[xiaoxiangmoe]

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

[arpowers]

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

[xiaoxiangmoe]

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

[arpowers]

@xiaoxiangmoe good work!

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

Is related to tsx

[yyx990803]

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)

[xiaoxiangmoe]

@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

[arpowers]

@xiaoxiangmoe which library has the bug?

[xiaoxiangmoe]

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

[lixiaofa]

@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

[stafyniaksacha]

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

[sxiong5]

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

[jd-solanki]

Try this: privatenumber/tsx#113 (comment)

[xiaoxiangmoe]

@lixiaofa see #8303 (comment)