react/jsx-runtime should be an external

[ignacionmiranda]

react/jsx-runtime should be an external

[IgnacioNMiranda]

Thanks @jrson83! I've done some more research and this seems logical to me. Thanks for having taken a look into it!

[jrson83]

@IgnacioNMiranda great, if you experience any problems, please let me know.

[IgnacioNMiranda]

@jrson83 Hey! thanks for opening this and for demonstrating interest in the repo!
Could you explain a bit more why this is not needed in the bundle? Please attach any url, blog post, or news that explain it, as I was not able to find any 🙂🙏🏻

[jrson83]

@IgnacioNMiranda as I was looking for examples, how to properly bundle a react component library I found this repo. Since I was wondering, why my setup was including the jsx-runtime, I checked the dist output of your repo and it was also including the runtime.

The library package has specified react & react-dom as peerDependencies, which includes the JSX runtime. As I understand, a library bundle is meant to be consumed by another project which needs react installed as dependencies, so it solves the required peerDependencies. When the library component is consumed by the project, it receives/uses the JSX runtime from the projects dependencies. That's why there is no need to include the runtime in the component library.

"peerDependencies": {
  "react": "18.2.0",
  "react-dom": "18.2.0"
},

I found this related issue, explaining that the cause is that vite is using the automatic JSX runtime (not classic). And this stackoverflow thread, providing the same information and fix.

I added the fix, run build, then pnpm pack in the vite-component-library-template root and installed the package as local dependency inside another react project. I used import { AtButton } from 'vite-component-library-template' and run dev/build without any problems.