vite-plugin-react-swc

vite-plugin-react-swc copied to clipboard

vite.config.js

`import { defineConfig } from 'vite' import { resolve } from 'path'; import react from '@vitejs/plugin-react-swc'

export default defineConfig({ define: { 'process.env': process.env }, plugins: [react()], build: { sourcemap: true, lib: { entry: resolve(__dirname, 'lib/main.js'), name: 'Mylib', fileName: 'my-lib', formats: ['iife'] }, }, }) `

lib/main.js

`import ReactDOM from 'react-dom/client' import DrawerShowdown from "../src/DrawerShowdown"

export { ReactDOM, DrawerShowdown, };`

Here is the component using 'useState'.

`import React, {useState} from 'react';

function DrawerShowdown() { const [open, setOpen] = useState(false);

const toggleDrawer = (newOpen) => () => { setOpen(newOpen); }; ... `

Here is how I'm using this component:

            <div id="testreact"></div>
            <script src="my-lib.iife.js" />
            <script>
                MyLib.ReactDOM.createRoot(document.getElementById('testreact')).render(
                    MyLib.DrawerShowdown(),
                )
            </script>

If I remove useState from component it works as expected. The host project doesn't include react / react-dom so excluding them from bundle causes 'ReactDOM not defined' error.