fix(react): replace static KaTeX CSS import with dynamic runtime injection#3314
Open
giulio-leone wants to merge 2 commits intoCopilotKit:mainfrom
Open
fix(react): replace static KaTeX CSS import with dynamic runtime injection#3314giulio-leone wants to merge 2 commits intoCopilotKit:mainfrom
giulio-leone wants to merge 2 commits intoCopilotKit:mainfrom
Conversation
…ction Next.js rejects global CSS imports from within node_modules, causing build failures when consumers use @copilotkitnext/react: Global CSS cannot be imported from within node_modules. Location: node_modules/@copilotkitnext/react/dist/index.mjs The static `import 'katex/dist/katex.min.css'` in CopilotChatAssistantMessage.tsx gets preserved in the dist bundle (tsdown unbundle mode), triggering the Next.js css-npm restriction. Replace with a useKatexStyles() hook that dynamically imports the CSS at runtime via useEffect. Dynamic imports bypass Next.js static analysis and load the stylesheet lazily when the component mounts. Fixes CopilotKit#2851
Contributor
|
@giulio-leone is attempting to deploy a commit to the CopilotKit Team on Vercel. A member of the Team first needs to authorize it. |
🦋 Changeset detectedLatest commit: 7d75f3c The changes in this PR will be included in the next version bump. This PR includes changesets to release 23 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
29affe1 to
7d75f3c
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #2851
Problem
Next.js rejects global CSS imports from within
node_modules, causing build failures:This affects all Next.js consumers of CopilotKit (versions 1.50.0+).
Root Cause
The static
import 'katex/dist/katex.min.css'inCopilotChatAssistantMessage.tsx(line 22) is preserved in the dist bundle by tsdown's unbundle mode. Next.js webpack statically analyzes imports and rejects global CSS fromnode_modules.Fix
Replace the static CSS import with a
useKatexStyles()hook that dynamically loads the stylesheet at runtime viauseEffect:useKatexStyles.ts— a singleton hook that usesimport()to lazy-load KaTeX CSSTesting
@copilotkitnext/web-inspector(unrelated)