Closed longilineo closed 1 month ago
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.
Hey I forgot to add the need reproduction back then. Please provide a link to a repro in stackblitz so I can have a look
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:
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.