Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Respect my jsxRuntime configuration #10670

Closed
7 tasks done
zettadam opened this issue Oct 27, 2022 · 3 comments · Fixed by #10714
Closed
7 tasks done

Respect my jsxRuntime configuration #10670

zettadam opened this issue Oct 27, 2022 · 3 comments · Fixed by #10714

Comments

@zettadam
Copy link

Describe the bug

I am building a library of React components that I'd like to publish without automatic JSX runtime. In previous versions of vite and @vitejs/plugin-react I was able to build my library without vite polluting my dist directory with JSX runtime junk. I updated both vite and @vitejs/plugin-react and the option to use classic jsxRuntime does not work as expected in combination with jsx option in typescript.config.ts.

I have externalized both react and react-dom as described in the docs.

The option jsx: 'preserve' in typescript.config.ts returns a Rollup error.
The option jsx: 'react-jsx in typescript.config.ts pollutes my dist directory with JSX runtime junk.
The option jsx: 'react' keeps dist clean, but only in my reproduction case. Locally, where I have dozens of components, it adds JSX runtime junk.

This used to work in earlier versions of vite and @vitejs/plugin-react

Reproduction

https://stackblitz.com/edit/vitejs-vite-kosz8e?terminal=dev

Steps to reproduce

Go to reproduction link and run npm run build with different options described above.

System Info

"@vitejs/plugin-react": "2.2.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "4.6.4",
"vite": "3.2.0"

Used Package Manager

npm

Logs

No response

Validations

@sapphi-red
Copy link
Member

The option jsx: 'react' keeps dist clean, but only in my reproduction case. Locally, where I have dozens of components, it adds JSX runtime junk.

This is how it should be configured. Would you expand about the JSX runtime junk?

@zettadam
Copy link
Author

zettadam commented Oct 28, 2022

With jsx: 'react' option set in my library, I still see JSX runtime files in my dist directory:
Screen Shot 2022-10-28 at 6 19 46 AM

I also use Storybook@7.0.45-alpha in my library to document components. It reuses my vite.config.ts but I use .jsx extension since their TS types are still in the state of flux and cause TS errors. But my stories are outside of src directory and are not taken into consideration during npm run build process.

@sapphi-red
Copy link
Member

Umm, I'm not sure why that happens. Would you create a reproduction of that?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants