[Bug] Newly initialized Preact repo - failing with pragma and pragmaFrag cannot be set when runtime is automatic.

[nixnao]

What version of vite are you using?

3.0.0

System info and storybook versions

Environment Info:

System:
OS: Windows 10 10.0.19044
CPU: (4) x64 Intel(R) Xeon(R) Platinum 8272CL CPU @ 2.60GHz
Binaries:
Node: 14.19.0 - C:\Program Files\nodejs\node.EXE
npm: 6.14.16 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)
npmPackages:
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-interactions: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/builder-vite: ^0.2.0 => 0.2.0
@storybook/preact: ^6.5.9 => 6.5.9
@storybook/testing-library: 0.0.13 => 0.0.13

Describe the Bug

After initializing a new Preact Vite + Storybook repo and only making a change to remove "type: module" from package.json, all component stories fail to load with the error message:

`[vite] Internal server error: {localPath}\vite-preact-ts-pragma-error\src\stories\Button.stories.jsx: pragma and pragmaFrag cannot be set when runtime is automatic.

1 |
| ^
2 | /* eslint-disable */
3 | // @ts-nocheck
4 | // @ts-ignore
Plugin: vite:react-babel
File: {localPath}/vite-preact-ts-pragma-error/src/stories/Button.stories.jsx`

Steps to reproduce:

1. npm create vite@latest (notable selections: preact, preact-ts)
2. npx sb@next init
3. Remove '"type": "module"' from package.json (or rename main.js to main.cjs) to properly compile.
4. npm run storybook

Link to Minimal Reproducible Example

https://github.com/nixnao/PreactSBVitePragmaError

Participation

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

[IanVS]

@joshwooding we may need to rethink always adding the vite react plugin for MDX support, as seen here, it conflicts with preact.

[wmonecke]

Any workarounds? This is still an issue since I just started a new preact project.

[IanVS]

@wmonecke have you tried Storybook 7, by chance? I think that could solve your issue. You can start fresh with npx sb@next init or upgrade the existing project you started by using npx sb@next upgrade --prerelease.