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

How to exclude React packages from production build? #178

Open
Irinova opened this issue May 15, 2024 · 1 comment
Open

How to exclude React packages from production build? #178

Irinova opened this issue May 15, 2024 · 1 comment

Comments

@Irinova
Copy link

Irinova commented May 15, 2024

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
Copy link

leweyse commented Jun 8, 2024

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',
        },
      },
    },

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

No branches or pull requests

2 participants