tsx transform fail in production mode

[heng1025]

<script setup lang='tsx'>
function Hello() {
  return <el-divider></el-divider>
}
</script>

<template>
  <hello />
  <div>--------</div>
  <el-divider></el-divider>
</template>

vite.config.ts

plugins: [
  Vue(),
  vueJsx(),
  Components({
    include: [/\.vue$/, /\.tsx$/],
    resolvers: [
      ElementPlusResolver(),
    ],
  }),
]

result:

• vite build
• vite dev

package version:

"element-plus": "^1.1.0-beta.18",
 "vite": "^2.5.3",
 "unplugin-vue-components": "0.15.4"

i guess it's the problem of vite itself.

[nabaonan]

talk about setup with lang="tsx"

[nabaonan]

<template>
  <test />
  <test2></test2>
  <test3></test3>
</template>

<script setup lang="tsx">
import { ElButton, ElDivider } from 'element-plus';
const test = () => <div>测试一下</div>;
const test2 = () => <ElButton>test elem</ElButton>;
const test3 = () => <ElDivider>test elem divider</ElDivider>;
</script>

here is vite.config.ts use 'unplugin-element-plus in tsx file

import ElementPlus from 'unplugin-element-plus/vite';
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    ElementPlus({
      // options
    }),
  
  ],
});

i test it in development and production mode ,everything is normal.

here is my dependencies

"dependencies": {
    "element-plus": "^1.1.0-beta.24",
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "@vitejs/plugin-vue-jsx": "^1.2.0",
    "less": "^4.1.2",
    "typescript": "^4.4.3",
    "unplugin-element-plus": "^0.1.3",
    "unplugin-vue-components": "^0.16.0",
    "vite": "^2.6.4",
    "vue-tsc": "^0.3.0"
  }

[heng1025]

<template>
  <test />
  <test2></test2>
  <test3></test3>
</template>

<script setup lang="tsx">
import { ElButton, ElDivider } from 'element-plus';
const test = () => <div>测试一下</div>;
const test2 = () => <ElButton>test elem</ElButton>;
const test3 = () => <ElDivider>test elem divider</ElDivider>;
</script>

here is vite.config.ts use 'unplugin-element-plus in tsx file

import ElementPlus from 'unplugin-element-plus/vite';
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    ElementPlus({
      // options
    }),
  
  ],
});

i test it in development and production mode ,everything is normal.

here is my dependencies

"dependencies": {
    "element-plus": "^1.1.0-beta.24",
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "@vitejs/plugin-vue-jsx": "^1.2.0",
    "less": "^4.1.2",
    "typescript": "^4.4.3",
    "unplugin-element-plus": "^0.1.3",
    "unplugin-vue-components": "^0.16.0",
    "vite": "^2.6.4",
    "vue-tsc": "^0.3.0"
  }

Yes,it will ok,but i don't import components explicit. import { ElButton, ElDivider } from 'element-plus'; statement don't exist.

[nabaonan]

if you want to use component in ts or tsx, this plugin not support it ,you can use unplugin-element-plus or other,this case out-of-scope of this plugin.

https://github.com/antfu/unplugin-vue-components/issues/73#issuecomment-869275063