Can't use tsx in .vue file

Environment

---

• Operating System: Windows_NT
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-27436017.7b6252a
• Package Manager: pnpm@6.32.2
• Bundler: Vite
• User Config: typescript, app, vite, css, router
• Runtime Modules: -
• Build Modules: -

---

Reproduction

index.vue

<template lang="pug">

</template>

<script lang="tsx" setup>
defineComponent({
  render(){
    return <div></div>
  }
})
</script>

package.json

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "full-install": "pnpm i --shamefully-hoist",
    "lint": "eslint . --fix"
  },
  "pre-commit": [
    "lint"
  ],
  "dependencies": {
    "tslib": "^2.3.1"
  },
  "devDependencies": {
    "@types/formidable": "^2.0.4",
    "@types/mime-types": "^2.1.1",
    "@typescript-eslint/eslint-plugin": "^5.13.0",
    "@typescript-eslint/parser": "^5.13.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.10.0",
    "eslint-plugin-vue": "^8.5.0",
    "file-type": "^17.1.1",
    "formidable": "^2.0.1",
    "mime-types": "^2.1.34",
    "mysql2": "^2.3.3",
    "nuxt3": "latest",
    "postcss": "^8.4.7",
    "pre-commit": "^1.2.2",
    "pug": "^3.0.2",
    "rollup": "^2.69.0",
    "sass": "^1.49.9",
    "typescript": "^4.6.2",
    "vanilla-lazyload": "^17.6.1"
  }
}

Describe the bug

Can’t use tsx in .vue file I have used npm and pnpm but neither works I recreate new project it is work

Additional context

nuxt.config.ts

import { defineNuxtConfig } from "nuxt3"
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  typescript:{
    shim:false,
  },
	vite: {
		css: {
			modules: {
				scopeBehaviour: "local",
				generateScopedName: "[local]-[hash:base64:5]"
			},
			preprocessorOptions: {
				scss: {
					additionalData: "@use \"@/assets/scss/color\";@import \"@/assets/scss/vars.scss\";",
				},
			},
		},
	},
	css: [
		"@/assets/scss/page.scss"
	],
	router: {
		mode:"history",
	},
})

tsconfig.json

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames":true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "importHelpers": true,
    "strict": true,
  },
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

.eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
        "react/jsx-filename-extension":[0],
        "no-mixed-spaces-and-tabs":0,
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}

pnpm-lock.yaml

Logs

ERROR  上午1:21:47 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: D:/work_space/serve/pages/index.vue?vue&type=script&setup=true&lang.tsx&macro=true
  14 |  defineComponent({
  15 |    render(){
  16 |      return <div></div>
     |                        ^
  17 |    }
  18 |  })
      at formatError (D:\work_space\serve\node_modules\.pnpm\vite@2.8.6_sass@1.49.9\node_modules\vite\dist\node\chunks\dep-9c153816.js:38098:46)
      at TransformContext.error (D:\work_space\serve\node_modules\.pnpm\vite@2.8.6_sass@1.49.9\node_modules\vite\dist\node\chunks\dep-9c153816.js:38094:19)
      at TransformContext.transform (D:\work_space\serve\node_modules\.pnpm\vite@2.8.6_sass@1.49.9\node_modules\vite\dist\node\chunks\dep-9c153816.js:69775:22)
      at async Object.transform (D:\work_space\serve\node_modules\.pnpm\vite@2.8.6_sass@1.49.9\node_modules\vite\dist\node\chunks\dep-9c153816.js:38334:30)
      at async doTransform (D:\work_space\serve\node_modules\.pnpm\vite@2.8.6_sass@1.49.9\node_modules\vite\dist\node\chunks\dep-9c153816.js:53030:29)

[avernusx]

@danielroe facing the same issue although it seems I have latest nuxt and vite.

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

/home/avernus/Work/cable/nuxt3/modules/TestModule/page.vue:6:20

4  |      return () => {
5  |        return (
6  |          <div></div>
   |                     ^
7  |        )
8  |      }

Repository to reproduce: https://github.com/avernusx/nuxt3-tsx-bug

Using node 18.2.0 and yarn 1.22.18

[yunyuyuan]

It seems that only App.vue can use <script lang="tsx">. Nuxt version 3.0.0-rc.1