Bundle size regression: @copilotkitnext/react barrel file pulls in heavy transitive deps (mermaid, shiki, streamdown)

[gsig123]

Problem

Upgrading @copilotkit/react-core + @copilotkit/react-ui from v1.10.x to v1.54.x causes a +21.95 MB bundle size increase due to heavy transitive dependencies pulled in through @copilotkitnext/react.

This is a follow-up to #3225, which was closed after PR #3310 fixed the @copilotkit/runtime leak from runtime-client-gql. However, a separate and larger bundle size problem remains: the @copilotkitnext/react barrel file.

Root Cause

@copilotkitnext/react/dist/index.mjs statically imports all components at the top level:

import CopilotChat from "./components/chat/CopilotChat.mjs";
import CopilotChatAssistantMessage from "./components/chat/CopilotChatAssistantMessage.mjs";
// ... every component

The chat components import heavy dependencies:

• CopilotChatAssistantMessage.mjs → streamdown → mermaid (~3 MB minified), shiki (~1 MB)
• Multiple components → lucide-react (~530 KB minified)
• streamdown → katex, cytoscape, langium

Since @copilotkitnext/react has:

1. No sideEffects field in package.json — bundlers assume all imports have side effects
2. No subpath exports — consumers can't import just hooks without triggering the barrel
3. Barrel file with static imports — even unused components are pulled into the module graph

Any consumer importing from @copilotkit/react-core (which re-exports hooks from @copilotkitnext/react) gets the entire dependency tree.

Impact

Metric	v1.10.6	v1.54.1	Delta
Top-level packages in node_modules	178	321	+143 (+80%)
node_modules disk size	111 MB	416 MB	+305 MB
Bundle size (Codecov)	baseline	+21.95 MB	+12.16%

The build also OOMs with 8 GB heap due to the bundler trying to process mermaid's massive module graph.

Proposed Fixes

Immediate: Add sideEffects declaration (PR #3652)

Adding "sideEffects": ["**/*.css"] to @copilotkitnext/react's package.json allows bundlers to tree-shake unused components. This completely eliminates mermaid/shiki/streamdown for hook-only consumers.

Follow-up suggestions

1. Subpath exports — e.g., @copilotkitnext/react/hooks so consumers can bypass the barrel entirely
2. Make heavy renderers opt-in — mermaid, shiki, and katex could be peer/optional dependencies or loaded via a plugin pattern, so consumers who don't need diagram/code rendering don't pay the cost
3. Add sideEffects: false to streamdown — this package also lacks the field, preventing tree-shaking even when the consumer package is properly configured

Reproduction

mkdir test && cd test
echo '{"dependencies":{"@copilotkit/react-core":"1.54.1","@copilotkit/react-ui":"1.54.1"}}' > package.json
npm install
du -sh node_modules  # 416 MB

Environment

• Bundler: rspack 1.3.x (also affects webpack 5)
• CopilotKit version: 1.54.1
• Previous working version: 1.10.6

[copilotkit-support-bot]

The bundle size regression you're experiencing is caused by the inclusion of heavy transitive dependencies (like mermaid, shiki, katex, and cytoscape) which are pulled in via the streamdown package used in the new "v2" chat components. Since the barrel files (like packages/react-core/src/index.tsx and packages/react-core/src/v2/index.ts) use static export * from ... statements, bundlers may include the entire dependency graph if they cannot safely tree-shake the module.

Details

The bundle size regression you're experiencing is caused by the inclusion of heavy transitive dependencies (like mermaid, shiki, katex, and cytoscape) which are pulled in via the streamdown package used in the new "v2" chat components.

Since the barrel files (like packages/react-core/src/index.tsx and packages/react-core/src/v2/index.ts) use static export * from ... statements, bundlers may include the entire dependency graph if they cannot safely tree-shake the module.

Root Cause Analysis

1. Direct Dependency on streamdown: The @copilotkit/react-core package now includes v2 components directly. CopilotChatAssistantMessage.tsx and CopilotChatReasoningMessage.tsx both import Streamdown from streamdown.
2. Transitive Bloat: streamdown depends on:
   • mermaid (~3MB)
   • shiki (~1MB)
   • katex, cytoscape, langium, etc.
3. Barrel File Issues: Historically, if a package lacks a sideEffects field or uses static imports in a barrel file, importing even a small hook (like useCopilotAction) can trigger the loading of the entire component tree and its dependencies.

Current Status & Fixes

• sideEffects Declaration: The sideEffects property has been added to @copilotkit/react-core/package.json set to ["**/*.css"]. This should officially allow modern bundlers (Webpack 5, Rspack, Vite) to tree-shake unused components when you only import hooks.
• V2 Migration: The "v2" components (which were previously referred to as @copilotkitnext/react during development) have been merged into @copilotkit/react-core.

Recommended Solutions

1. Optimization via Tree Shaking (Modern Bundlers)

Ensure your bundler is successfully respecting the sideEffects: ["**/*.css"] flag in @copilotkit/react-core. If you only import hooks, streamdown and its transitive dependencies should be excluded from your final bundle.

2. Import from Subpaths (If supported)

While official subpath exports for hooks are being finalized, you can try importing directly to bypass the main barrel:

// Instead of:
// import { useCopilotAction } from "@copilotkit/react-core";

// Try (if your environment supports it):
import { useCopilotAction } from "@copilotkit/react-core/dist/hooks";

3. Request Peer/Optional Dependencies

As a follow-up to the fixes already implemented, we are evaluating making heavy renderers (like mermaid and shiki) optional or plugin-based. This would allow users to opt-in to diagram/code rendering rather than paying the bundle cost by default.

Verification of Fix

To verify if the sideEffects fix is working in your environment:

1. Upgrade to the latest version (e.g., 1.55.0-next.x or higher).
2. Import only a hook (e.g., useCopilotAction) in a clean entry point.
3. Check your bundle analyzer (e.g., webpack-bundle-analyzer or rspack-bundle-analyzer) to ensure mermaid or shiki are not present.

Confidence Assessment: High. The root cause (barrel leakage) and the primary fix (sideEffects field) match the behavior seen in recent releases. Further work on subpath exports and optional dependencies is recommended for complete isolation.

Sources:

• packages/react-core/package.json (contains sideEffects fix and streamdown dependency)
• packages/react-core/src/v2/components/chat/CopilotChatAssistantMessage.tsx (site of heavy import)
• CopilotKit Documentation - Reference

---

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

✅ This was helpful | ❌ Need more help

[gsig123]

Additional findings

After deeper investigation, I want to clarify the specific package where sideEffects is missing:

• @copilotkit/react-core (from packages/react-core/) already has "sideEffects": ["**/*.css"] ✅
• @copilotkitnext/react (the transitional v2 package, published separately on npm) does NOT have sideEffects ❌

@copilotkitnext/react is the package that contains the barrel file pulling in streamdown → mermaid/shiki. Since @copilotkit/react-core@1.54.1 depends on @copilotkitnext/react@1.54.1, the missing sideEffects on @copilotkitnext/react prevents bundlers from tree-shaking its unused exports.

Potential resolution paths

1. Add "sideEffects": ["**/*.css"] to @copilotkitnext/react during the publish process — this would immediately unblock consumers.
2. Ship the v2 consolidation (consolidate-v1-v2-packages changeset) — this eliminates @copilotkitnext/react entirely and moves everything to @copilotkit/react-core/v2, which already has the correct sideEffects declaration.

Option 2 seems like it's already in progress. Is there a timeline for when the consolidation will land in a stable release?

[gsig123]

Confirmed resolved at v1.55.1 — @copilotkitnext/react is no longer in the dependency tree. Our CI bundle size checks pass cleanly now. Thanks for the fix!