remix with vite bundle is not treeshaking dependency correctly

[Nradar]

Hi! I have project(called A) built with remix/vite, and it include my other library(called B) built based on storybook and vite. Both A and B have installed @tabler/icons-react as dev dependency.

When I build library B itself, the tabler icons are doing okay, not included in the build. But when I build the project A, the tabler icons in B are all transforming and packed into build/client/assets/B.js. It occupied a huge bundle size. I'm not sure if this is related to treeshaking or some configs? I have attached both vite configs below. Please anyone help me on this! Thanks in advance!

Project A vite config:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import mdx from "@mdx-js/rollup";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  ssr: {
    noExternal: ["pdfmake/build/vfs_fonts" /* , "dc" */],
  },

  plugins: [
    mdx({
      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
    }),
    remix(),
    tsconfigPaths(),
    visualizer({
      open: true,
      gzipSize: true,
      template: "treemap",
    }),
  ],
});

Library B vite config:

import { defineConfig } from 'vite'
import { resolve } from 'path'
import react from '@vitejs/plugin-react'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import ignore from 'rollup-plugin-ignore'
import dts from 'vite-plugin-dts'
import * as packageJson from './package.json'
import dynamicImport from 'vite-plugin-dynamic-import'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
	plugins: [
		visualizer({ open: true, gzipSize: true }),
		react(),
		ignore(['moment', 'moment-timezone']),
		dts({
			include: ['src'],
		}),
		dynamicImport(),

		viteStaticCopy({
			targets: [
				{
					src: 'tailwind.config.js',
					dest: '',
				},
				{
					src: 'node_modules/@fontsource/inter/files/*400*',
					dest: 'files',
				},
			],
		}),
	],
	build: {
		minify: true,
		copyPublicDir: false,
		lib: {
			entry: resolve(__dirname, 'src/index.tsx'),
			name: 'bv-ng-components',
			formats: ['es', 'cjs'],
			fileName: format => `bv-ng-components.${format}.js`,
		},
		rollupOptions: {
			external: [
				...Object.keys(packageJson.devDependencies),
				...Object.keys(packageJson.peerDependencies),
				'moment',
				'moment-timezone',
				'@fontsource/inter',
			],
			output: {
				sourcemap: false,
				compact: false,
			},
		},
	},
})