[DX] Favor `.tsx` extension in Vite/React/TS framework

Describe the bug

This is not a code bug but an misalignment in developer expectations.

The Vite/React/TS framework uses .ts extensions for Stories and configuration. However, .tsx is required when adding React components (decorators and templates).

On the story page, the Vite provided error is misleading (screenshot attached): Failed to find dynamically imported module: **/MyComponent.stories.ts

This is a little confusing because a file by that name exists (on the user filesystem). The file just failed to build the included JSX.

The correct error can be seen in both console and and docs page: [plugin:vite:esbuld] Transform failed…

Documentation does not assist here because it is based on the Webpack experience, which is much more permissive. Docs suggest that .tsx or .ts are suitable.

To Reproduce

• npx storybook@next repro
  • resolved as: storybook@7.0.0-beta.55
• framework: TS/React/Vite
• node: 16.13.2
• Add any decorator or render field to a story

If the file extensions aren't changed to .tsx, they produce these errors:

System

No response

Additional context

I spoke with the Storybook team in internal Chromatic chat. The favored solution there is to use use .tsx files in this sandbox, even though the extension is extraneous for the CSF3 examples.