vue3 jsx SyntaxError: Error transforming xxx.cjs Unexpected token, expected ";"

[MoonCheung]

This is my button component code

import { defineComponent } from 'vue';
import { style, styleInject } from '@img-uploader/core';

styleInject(style);
export default defineComponent({
  name: 'CButton',
  inheritAttrs: false,
  props: {
    onClick: Function
  },
  setup(props, { slots, attrs }) {
    return () => {
      const eventProps = { ...props, ...attrs };
      return (
        <button {...(eventProps as any)} class='button'>
          {slots.default?.()}
        </button>
      );
    };
  }
});

This is my tsup.config.ts configuration：

import { defineConfig } from 'tsup';

export default defineConfig(() => {
  return {
    entry: {
      'index.vue': 'src/index.ts'
    },
    dts: {
      compilerOptions: {
        preserveSymlinks: false
      }
    },
    clean: true,
    splitting: true,
    format: ['esm', 'cjs', 'iife'],
    external: ['vue']
  };
});

dist error at build time:：SyntaxError: Error transforming xxx. cjs Unexpected token, expected ";"

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[well-prado]

@egoist Is there a way to use tsup with Vue? I'm trying to build a mono repo design system. But since every thing was made using React, I have no idea how to transform it for using Vue 3.

Can you help me?

{
  "name": "@deskree-ui/vue",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsup src/main.ts --format esm,cjs --dts --external vue",
    "dev": "tsup src/main.ts --format esm,cjs --dts --external vue --watch",
    "lint": "eslint src/**/* --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
  },
  "devDependencies": {
    "@deskree-ui/eslint-config": "*",
    "@deskree-ui/tokens": "*",
    "@deskree-ui/ts-config": "*",
    "@types/node": "^18.14.2",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/tsconfig": "^0.1.3",
    "tsup": "^6.7.0",
    "typescript": "~4.8.4",
    "vue": "^3.2.47",
    "vue-tsc": "^1.2.0"
  }
}

[hairyf]

You can use it in conjunction with unplugin-vue-jsx, refer to:

import { defineConfig } from 'tsup'
import vueJsx from 'unplugin-vue-jsx/esbuild'

cosnt config = defineConfig({
   esbuildPlugins: [
      vueJsx()
   ]
})

[MoonCheung]

You can use it in conjunction with unplugin-vue-jsx, refer to:

import { defineConfig } from 'tsup'
import vueJsx from 'unplugin-vue-jsx/esbuild'

cosnt config = defineConfig({
   esbuildPlugins: [
      vueJsx()
   ]
})

Thank you, these plug-ins may be solutions.