[Bug] render was not supported :( !

[reintroducing]

Describe the bug

I'm migrating my Storybook instance to Vite and for the most part things are working fine. Even with everything showing up, I'm seeing this message in the console and I have no clue why:

render was not supported :( !

Steps to reproduce the behavior

I honestly have no clue how to reproduce it, I'm just migrating to this and seeing the issue. I tried looking at the source of this package but it is not clear to me why this would be showing up.

Expected behavior

No message appears in console.

Screenshots and/or logs

If applicable, add screenshots and/or logs to help explain your problem.

Environment

• OS: [e.g. iOS] macOS Monterey 12.0.1
• Node.js version: [e.g. v12.17.0] 16.13.0
• NPM version: [e.g. 6.14.4] 8.1.0
• Browser (if applicable): [e.g. chrome, safari] Chrome
• Browser version (if applicable): [e.g. 22] 99.0.4844.83 (Official Build) (arm64)
• Device (if applicable): [e.g. iPhone6] Macbook Pro

Additional context

Add any other context about the problem here.

[IanVS]

@shilman I don't really quite understand what render means in this context. Is it something we need to do something with, even though I've never seen it actually cause observable problems? It's definitely a scary warning and I'd rather remove it if it's just a red herring.

[joshwooding]

@shilman I don't really quite understand what render means in this context. Is it something we need to do something with, even though I've never seen it actually cause observable problems? It's definitely a scary warning and I'd rather remove it if it's just a red herring.

@IanVS We probably want to implement https://github.com/storybookjs/storybook/blame/next/lib/builder-webpack4/src/preview/virtualModuleEntry.template.js#L38. It's been available since v6.3.0-rc.5 so should be fine?

[shilman]

@joshwooding Bingo! Render is a way for view layers to provide default render functions for CSF3, so that your stories can look like:

export const Foo = {
  args: { a: 1, b: 2 }
}

And storybook is smart enough to pass those args to your component as props.

[IanVS]

Hmmm, but it seems like we can already use stories in that format (see

builder-vite/examples/react/stories/Button.stories.jsx

Line 11 in 79f2811

export const Primary = {

). So what would a "failing" test look like, in this case?

[IanVS]

@shilman is this only needed for some frameworks and not others? Do you know of any view layers which use this method? Apparently react, vue3, and svelte don't need it?

[joshwooding]

@IanVS I think there might be a bug. I started playing around with this but need to take a closer look.

[shilman]

@IanVS @joshwooding

If you're using 6.4 I think it's only React & Angular that supports framework "default" render functions.
If you're using 6.5, you can see the list here: storybookjs/storybook#15498

Therefore, you should see some kind of error if you try to do this in web-components, regardless of the version.