fix: resolve KaTeX CSS import error from CopilotKit

wenluowang · wenluowang · commit 65172f9bb45a · 2026-02-05T15:51:05.000Z
diff --git a/components/CopilotKitWrapperClient.jsx b/components/CopilotKitWrapperClient.jsx
@@ -0,0 +1,8 @@
+import dynamic from "next/dynamic";
+
+const CopilotKitWrapperClient = dynamic(
+  () => import("./CopilotKitWrapper"),
+  { ssr: false }
+);
+
+export default CopilotKitWrapperClient;
diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,4 @@
+const webpack = require('webpack')
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
   themeConfig: './theme.config.jsx'
@@ -8,13 +9,27 @@ const isDev = process.env.NODE_ENV !== 'production'
 const basePath = isDev ? '' : '/docs'
 
 module.exports = withNextra({
+  transpilePackages: [
+    '@copilotkitnext/react',
+    '@copilotkit/react-core',
+    'streamdown',
+  ],
   output: 'export',
   images: {
     unoptimized: true,
   },
   basePath,
   assetPrefix: basePath,
   trailingSlash: true,
+  webpack: (config) => {
+    config.plugins.push(
+      new webpack.IgnorePlugin({
+        resourceRegExp: /katex\.min\.css$/,
+        contextRegExp: /node_modules/,
+      })
+    )
+    return config
+  },
 })
 
 // If you have other Next.js configurations, you can pass them as the parameter above
diff --git a/pages/_app.mdx b/pages/_app.mdx
@@ -1,11 +1,21 @@
 import "../styles/custom.css";
-import CopilotKitWrapper from "../components/CopilotKitWrapper";
+import CopilotKitWrapper from "../components/CopilotKitWrapperClient";
+import Head from "next/head";
 
 export default function MyApp({ Component, pageProps }) {
   return (
-    <CopilotKitWrapper>
-      <Component {...pageProps} />
-    </CopilotKitWrapper>
+    <>
+      <Head>
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/katex@0.16.28/dist/katex.min.css"
+          crossOrigin="anonymous"
+        />
+      </Head>
+      <CopilotKitWrapper>
+        <Component {...pageProps} />
+      </CopilotKitWrapper>
+    </>
   );
 }
 
