nuxt: 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"
]
}
}
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)
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 3
- Comments: 18 (9 by maintainers)
@danielroe facing the same issue although it seems I have latest nuxt and vite.
Repository to reproduce: https://github.com/avernusx/nuxt3-tsx-bug
Using node 18.2.0 and yarn 1.22.18
It seems that only
App.vuecan use<script lang="tsx">. Nuxt version3.0.0-rc.1I have to change all pages files from ts to tsx?