[unplugin-vue-jsx-vapor] [BABEL] <ComponentName>.tsx: .inherits must be a function, or undefined

[WebKieth]

Describe the bug

Hello.
I wrote unstyled UI Kit for Vue and want to prepare it for Vapor.
My components written with tsx as this template

defineComponent({
  props: {...},
  emits: {...},
  setup() {
    return () => (<div>...</div>)
  }
})

I upgrade vite with plugins, install your plugin and replace vueJsx on it.
On first build try I got this error.
Than I looked up your playground and try to change component template to a function like this:

defineComponent(({prop1, prop2}) => {
  return () => (<div>...</div>)
}, {emits: {...}})

But it isn't help.
So what is the reason?

Repo branch with problem:
https://github.com/WebKieth/blanc-ui/tree/feature/vapor-mode

Environment:
MacOS Sequoia 15.1.1
Nodejs 20.16.0
Vite 6.2.0

Full Stack trace:

> tsc -b && vite build -c ./vue/vite.config.ts

vite v6.2.0 building for production...
✓ 3 modules transformed.
✗ Build failed in 3.10s
error during build:
[unplugin-vue-jsx-vapor] [BABEL] /Users/nikitahovdun/opensource/blanc-ui/vue/src/components/accordion/Accordion.tsx: .inherits must be a function, or undefined
file: /Users/nikitahovdun/opensource/blanc-ui/vue/src/components/accordion/Accordion.tsx
    at assertFunction (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/validation/option-assertions.js:111:11)
    at /Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/validation/plugins.js:56:7
    at Array.forEach (<anonymous>)
    at validatePluginObject (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/validation/plugins.js:48:20)
    at /Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/full.js:222:55
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/gensync-utils/async.js:21:3)
    at Generator.next (<anonymous>)
    at evaluateSync (/Users/nikitahovdun/opensource/blanc-ui/node_modules/gensync/index.js:251:28)
    at Function.sync (/Users/nikitahovdun/opensource/blanc-ui/node_modules/gensync/index.js:89:14)
    at sync (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/gensync-utils/async.js:61:25)
    at sync (/Users/nikitahovdun/opensource/blanc-ui/node_modules/gensync/index.js:182:19)
    at onFirstPause (/Users/nikitahovdun/opensource/blanc-ui/node_modules/gensync/index.js:210:24)
    at Generator.next (<anonymous>)
    at cachedFunction (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/caching.js:52:46)
    at cachedFunction.next (<anonymous>)
    at loadPluginDescriptor (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/full.js:259:17)
    at loadPluginDescriptor.next (<anonymous>)
    at loadPluginDescriptors (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/full.js:129:33)
    at loadPluginDescriptors.next (<anonymous>)
    at /Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/full.js:156:21
    at Generator.next (<anonymous>)
    at loadFullConfig (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/config/full.js:141:5)
    at loadFullConfig.next (<anonymous>)
    at transform (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/transform.js:20:44)
    at transform.next (<anonymous>)
    at evaluateSync (/Users/nikitahovdun/opensource/blanc-ui/node_modules/gensync/index.js:251:28)
    at sync (/Users/nikitahovdun/opensource/blanc-ui/node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at transformSync (/Users/nikitahovdun/opensource/blanc-ui/node_modules/@babel/core/lib/transform.js:42:76)
    at transformVueJsxVapor (file:///Users/nikitahovdun/opensource/blanc-ui/node_modules/unplugin-vue-jsx-vapor/dist/chunk-MT4EGRAZ.js:18:18)
    at Object.transform (file:///Users/nikitahovdun/opensource/blanc-ui/node_modules/unplugin-vue-jsx-vapor/dist/chunk-D72724LQ.js:44:14)
    at plugin.transform (file:///Users/nikitahovdun/opensource/blanc-ui/node_modules/unplugin/dist/index.mjs:1520:25)
    at Object.handler (file:///Users/nikitahovdun/opensource/blanc-ui/node_modules/vite/dist/node/chunks/dep-ByPKlqZ5.js:51731:15)
    at file:///Users/nikitahovdun/opensource/blanc-ui/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:21835:40

Reproduction

https://github.com/WebKieth/blanc-ui/tree/feature/vapor-mode

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M2
    Memory: 137.55 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.16.0/bin/yarn
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
  Browsers:
    Chrome: 133.0.6943.128
    Safari: 18.1.1

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[zhiyuanzmj]

Vapor component don't support return function. you can return JSX directly.

defineComponent(() => {
  return <div>foo</div>
})

[WebKieth]

@zhiyuanzmj thanks for fast answer
I tried but result is still the same

vite v6.2.0 building for production...
✓ 3 modules transformed.
✗ Build failed in 2.09s
error during build:
[unplugin-vue-jsx-vapor] [BABEL] /Users/nikitahovdun/opensource/blanc-ui/vue/src/components/accordion/Accordion.tsx: .inherits must be a function, or undefined
file: /Users/nikitahovdun/opensource/blanc-ui/vue/src/components/accordion/Accordion.tsx

[zhiyuanzmj]

Vapor mode is under development. you can use pkg.pr.new to get vapor runtime.

pnpm i https://pkg.pr.new/vue@dc910ac

[zhiyuanzmj]

I'm looking at the babel error, wait for a moment

[zhiyuanzmj]

I released a new version to fixed the babel error.
You can upgrade to 1.4.2

[zhiyuanzmj]

The vapor app need to use createVaporApp instead of createApp to create.
But in your project I don't know where is createApp.

[zhiyuanzmj]

[zhiyuanzmj]

I find a error of component nested component. I'll look at that in a minute, you can delete them first.

// ../spoiler/Spoiler.tsx
<Button
    variant='secondary'
    size={props.size}
    onClick={() => handleToggle()}
  >
    <Icon
      name={opened.value ? props.openedIcon : props.closedIcon}
      size={props.size}
    />
  </Button>

[WebKieth]

Yes, it works! Thanks for the fix.
I think now storybook won't work with vapor. All previews needs to render by my own entry point. createApp in storybook is indden under the hood.
And one more point - I think its MacOS issue - after installing your fix I got new error

> tsc -b && vite build -c ./vue/vite.config.ts

/Users/nikitahovdun/opensource/blanc-ui/node_modules/vite/node_modules/rollup/dist/native.js:64
                throw new Error(
                      ^

Error: Cannot find module @rollup/rollup-darwin-arm64. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.

After installing @rollup/rollup-darwin-arm64 It's gone

[zhiyuanzmj]

Oh! Thanks.

[zhiyuanzmj]

I find a error of component nested component. I'll look at that in a minute, you can delete them first.

// ../spoiler/Spoiler.tsx
<Button
variant='secondary'
size={props.size}
onClick={() => handleToggle()}

<Icon
  name={opened.value ? props.openedIcon : props.closedIcon}
  size={props.size}
/>

Fixed.