How to exclude React packages from production build?

[Irinova]

I need only native web-components without react libs in build file. Is it possible to do that? My Vite config:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    // generate .vite/manifest.json in outDir
    manifest: true,
    rollupOptions: {
      // overwrite default .html entry
      input: '/src/index.jsx',
    },
  },
})

index.jsx:

import ReactDOM from "react-dom/client"
import r2wc from "react-to-webcomponent"
import 'vite/modulepreload-polyfill'

const Greeting = () => {
 return <h1>Hello, World!</h1>
}

const WebGreeting = r2wc(Greeting, React, ReactDOM)

customElements.define("web-greeting", WebGreeting)

[leweyse]

Rollup has the option external to exclude files or dependencies from the bundle: https://rollupjs.org/configuration-options/#external

You can use something like this:

    rollupOptions: {
      external: ['react'],
      output: {
        globals: {
          react: 'React',
        },
      },
    },