[Bug]: I use MUI and Storybook to create the new UI library, here I used light and dark theme to customize 'Button' component color, its theme is working properly in local dev environment. but not working on using the component from 'dist' directory after npm run build.

[rick-liyue-huang]

Describe the bug

I use MUI and Storybook to create the new UI library, here I used light and dark theme to customize 'Button' component color, its theme is working properly in local dev environment. but not working on using the component from 'dist' directory after npm run build. please see the detail of 'App.tsx' file, in which its working good on import { Button } from './components' and will lose theme when import { Button } from '../dist/try-ui-core-component'.

Reproduction

https://stackblitz.com/~/github.com/rick-liyue-huang/try-ui-core-component

Steps to reproduce

No response

System Info

window, 'npm create vite@latest my-vue-app -- --template reat-ts', 'npx storybook@latest init', 'npm install @mui/material @emotion/react @emotion/styled'

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

That sounds like React context got duplicated due to lib bundling. To avoid this, usually you need to copy all dependencies from package.json to rollupOptions.external something like:

https://stackblitz.com/edit/github-ghg571?file=vite.config.ts

import pkg from "./package.json"

export default defineConfig({
    ...
    build: {
        lib: {
            formats: ["es"],
            entry: path.resolve(__dirname, './src/components/index.tsx'),
            fileName: 'try-ui-core-component',
        },
        rollupOptions: {
            external: Object.keys(pkg.dependencies),
        },
    },
})

[hi-ogawa]

Closing as the config I provided is working.