[Bug] Using JSX syntax in render template results in no output and emits an `invalid template option` warning

[kevinvalk]

What version of vite are you using?

vite/4.3.9 darwin-arm64 node-v18.16.1

System info and storybook versions

System:
  OS: macOS 13.4.1
  CPU: (10) arm64 Apple M1 Max
Binaries:
  Node: 18.16.1 - /opt/homebrew/opt/node@18/bin/node
  Yarn: 1.22.19 - /opt/homebrew/bin/yarn
  npm: 9.5.1 - /opt/homebrew/opt/node@18/bin/npm
Browsers:
  Chrome: 114.0.5735.198
  Safari: 16.5.1
npmPackages:
  @storybook/addon-essentials: ^7.0.25 => 7.0.25 
  @storybook/addon-interactions: ^7.0.25 => 7.0.25 
  @storybook/addon-links: ^7.0.25 => 7.0.25 
  @storybook/blocks: ^7.0.25 => 7.0.25 
  @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2 
  @storybook/vue3: ^7.0.25 => 7.0.25 
  @storybook/vue3-vite: ^7.0.25 => 7.0.25 

Describe the Bug

Using JSX syntax in stories causes Storybook to render no output and emit a console warning

import type { Meta, StoryObj } from "@storybook/vue3";
import { App } from "./App";

const meta = {
  title: "App",
  render: () => ({
    components: { App },
    template: <div>overwriting with jsx</div>,
  }),
} satisfies Meta<typeof App>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {};

Link to Minimal Reproducible Example

https://github.com/kevinvalk/problem-storybook-vite-vue3-jsx

Participation

• [ ] I am willing to submit a pull request for this issue.

[IanVS]

@chakAs3 do you know what might be happening here?

[chakAs3]

Hi @kevinvalk, have ever used JSX in Vue?
if the case is the same in Storybook, the render function returns a Vue component, so if you use JSX or render functions, you can't use the template option you need to use the setup function and return your JSX expression

here is a repo that shows different render function https://github.com/storybook-vue/storybook-vue-custom-render.git

[kevinvalk]

O wow, I completely misunderstood the warning runtime.js:94 [Vue warn]: Component is missing template or render function.. Indeed this is a user error.

That said, I am confused about the type of template as (according vue internals) it is an template?: string | object field. Hence I do not get any "errors" that I am not using a string and it happily accepts JSX or h(). To protect against user errors, maybe it is something to be checked. But it is not the responsibility of storybook to do that....

Regardless, thanks for the help, closing!