Can't use tsx in .vue file #13443
Description
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"
]
}
}
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¯o=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)