Tree shaking dynamic import from VIte bundled React component library

SamyZog commented 3 weeks ago

Describe the bug

I am building a private React component library using Vite, I am using a barrel file for all my exports.

src/core/index.ts

export * from './components';
export * from './hooks';
export * from './icons';
export type * from './types';
export * from './utils';

package.json

 "files": [
    "dist"
  ],
  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "name": "ui-kit",
  "sideEffects": false,
  "type": "module",
  "types": "dist/index.d.ts",

The library is private and I am using it inside my company's internal repo using git+http

Directly importing my components works fine, every module is tree-shaked, but when using Nextjs dynamic import, it pulls all the library

import { Button } from "@ui-kit" => 2kb

const Button = dynamic(() => import('@ui-kit').then(mod => mod.Button), {
  ssr: false,
}); => 148kb

This is my vite config

/* eslint-disable import/no-extraneous-dependencies */
import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    dts({
      include: ['src/core'],
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
    copyPublicDir: false,
    sourcemap: true,
    lib: {
      entry: './src/core/index.ts',
      formats: ['es'],
      fileName: 'index',
    },
    rollupOptions: {
      output: {
        preserveModules: true,
      },
      external: ['react', 'react-dom', 'date-fns', '@emotion/react', '@emotion/styled'],
    },
  },
  resolve: {
    alias: {
      src: path.resolve(__dirname, './src'),
    },
  },
});

Reproduction

N/A

Steps to reproduce

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 9 5980HX with Radeon Graphics
    Memory: 16.40 GB / 31.41 GB
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (125.0.2535.92)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @vitejs/plugin-react: 4.2.1 => 4.2.1
    vite: 5.2.12 => 5.2.12

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

bluwy commented 3 weeks ago

Is this the same as https://github.com/vitejs/vite/issues/14145? It's fixed in the 5.3 beta

SamyZog commented 3 weeks ago

Is this the same as #14145? It's fixed in the 5.3 beta

I am not sure if this is related, correct me if I am wrong, as I understood the mentioned issue talks about building the final bundle, that uses the library, with Vite. Maybe my issue is a configuration issue?

hi-ogawa commented 2 weeks ago

when using Nextjs dynamic import, it pulls all the library

This sounds like a Next.js bundler concern and I'm not sure how this relates to Vite library mode. Do you know if this issues shows up only for ui library built with Vite?

They seem to have this https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-named-exports, but either way, this seems more of Next.js side inconsistency (static named import vs dynamic named import), so you should probably look for help there.

vitejs / vite