Tree Shaking Not Working - React

Describe the bug

I have monorepo setup with component library.

1. I am Using Lerna for that
2. Using vite for multiple project creation inside that packages.
3. Using component kit as component library to use those components.

I am using vite as bundler for building library as well as other projects inside that packages folder.

Currently component library is pretty big, which is around 8 MB after build.

This 8 MB is being downloaded for each project even though I am not using all components for particular project.

Checked with production build.

1. Vite Config file of Component Lib.

import { defineConfig } from 'vite';
import path from 'path';
import typescript from '@rollup/plugin-typescript';

export default defineConfig({
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/index.ts'),
            name: 'index',
            formats: ['es'],
        },
        rollupOptions: {
            external: ['react', 'react-router-dom', 'rc-time-picker', 'moment'],
            output: {
                globals: {
                    react: 'react',
                },
                strict: false,
                dir: 'lib',
                sourcemap: false,
            },
            plugins: [
                typescript({
                    allowJs: true,
                    allowSyntheticDefaultImports: true,
                    exclude: path.resolve(__dirname, './node_modules/**'),
                    declaration: true,
                    declarationDir: 'lib',
                    rootDir: path.resolve(__dirname, './src'),
                    sourceRoot: path.resolve(__dirname, './src/index.ts'),
                    emitDeclarationOnly: true,
                }),
            ],
        },
    },
});`

1. Used following vite config file for each package

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  build: {
    polyfillDynamicImport: true,
  },
  publicDir: "public",
  define: {
    global: "window", // fix for packages that support both node and browser
  },
});

Reproduction

Use reproduction step mentioned in description.

System Info

System:
    OS: macOS 11.5.2
    CPU: (8) arm64 Apple M1
    Memory: 83.00 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 7.19.1 - ~/.nvm/versions/node/v16.6.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Firefox: 98.0.2
    Safari: 14.1.2

Used Package Manager

yarn

Logs

System:
    OS: macOS 11.5.2
    CPU: (8) arm64 Apple M1
    Memory: 100.28 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 7.19.1 - ~/.nvm/versions/node/v16.6.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.83
    Firefox: 98.0.2
    Safari: 14.1.2

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 https://github.com/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.

[Codex-]

Experiencing issues with tree shaking in basically the same style, using specific paths and esm but still getting an entire UI lib bundled:

[malavshah9]

@bluwy Here is the Repo Link.

Pushed with node modules intentionally as using some private packages.

My problem is:

Even though I have only imported Button Component, Why did bundle get the code for both component Input and Button.