How do I make my react package use an external jsx runtime?

Question

In react, if I use jsx, then react-jsx-runtime will be included in the packaged product.

When I import multiple libraries that use jsx, react-jsx-runtime will be repeated multiple times in the js file of my site. (I saw license of react-jsx-runtime.production.min.js in the js file many times and and contains similar code, except that the variable names are different)

Is there any way to create a library that uses an external react-jsx-runtime?

I use vite as my packaging tool. I have set react and react-dom as external libraries. This does reduce the package size, but will still include the jsx runtime.

// vite config
export default defineConfig({
  build: {
    lib: {
      entry: 'index.tsx',
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'index',
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
    target: 'modules',
  },
  plugins: [react(), dts({
    outputDir: 'dist/types',
    include: ['./**/*.ts(x)?'],
  })],
})

Answer 1

I found I should add "react/jsx-runtime" to external list

Because of the import

import { createRoot } from 'react-dom/client'

In react 18/19 should also include react-dom/client

// vite.config.ts

external: ['react', 'react/jsx-runtime', 'react-dom', 'react-dom/client']