UI: Fix Next.js 14.2.8 dynamic import problems

fuma-nama · Sep 5, 2024 · afb697e · afb697e
1 parent 9c2095e
commit afb697e
Show file tree

Hide file tree

Showing 27 changed files with 609 additions and 528 deletions.
diff --git a/.changeset/popular-ways-boil.md b/.changeset/popular-ways-boil.md
@@ -0,0 +1,6 @@
+---
+'fumadocs-core': patch
+'fumadocs-ui': patch
+---
+
+Fix Next.js 14.2.8 dynamic import problems
diff --git a/apps/docs/components/preview/index.tsx b/apps/docs/components/preview/index.tsx
@@ -9,23 +9,13 @@ import { Card } from 'fumadocs-ui/components/card';
 import { Heading } from 'fumadocs-ui/components/heading';
 import type { ReactNode } from 'react';
 import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
-import dynamic from 'next/dynamic';
+import { Banner } from 'fumadocs-ui/components/banner';
+import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
+import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
 import BannerImage from '@/public/banner.png';
 import { modes } from '@/utils/modes';
 import { Wrapper } from './wrapper';
 
-const Banner = dynamic(() =>
-  import('fumadocs-ui/components/banner').then((m) => m.Banner),
-);
-
-const InlineTOC = dynamic(() =>
-  import('fumadocs-ui/components/inline-toc').then((res) => res.InlineTOC),
-);
-
-const ImageZoom = dynamic(() =>
-  import('fumadocs-ui/components/image-zoom').then((m) => m.ImageZoom),
-);
-
 export default {
   heading: (
     <Wrapper>

diff --git a/apps/docs/content/docs/headless/mdx/rehype-code.mdx b/apps/docs/content/docs/headless/mdx/rehype-code.mdx
@@ -10,13 +10,11 @@ A wrapper of [Shiki](https://shiki.style), the built-in syntax highlighter.
 Add the rehype plugin.
 
 ```ts
-import { rehypeCode } from 'fumadocs-core/mdx-plugins'
+import { rehypeCode } from 'fumadocs-core/mdx-plugins';
 
 const config = {
-    rehypePlugins: [
-      [rehypeCode, { ... }]
-    ],
-}
+  rehypePlugins: [rehypeCode],
+};
 ```
 
 ### Output

diff --git a/apps/docs/content/docs/ui/(integrations)/math.mdx b/apps/docs/content/docs/ui/(integrations)/math.mdx
@@ -21,14 +21,14 @@ Add the remark/rehype plugins you have installed above.
 The code might be vary depending on your content source, here is an example for Fumadocs MDX:
 
 ```ts
-import createMDX from 'fumadocs-mdx/config';
 import rehypeKatex from 'rehype-katex';
 import remarkMath from 'remark-math';
+import { defineConfig } from 'fumadocs-mdx/config';
 
-const withMDX = createMDX({
+export default defineConfig({
   mdxOptions: {
     remarkPlugins: [remarkMath],
-    // Place it at first so that it won't be changed by rehype-pretty-code
+    // Place it at first so that it won't be changed by syntax highlighter
     rehypePlugins: (v) => [rehypeKatex, ...v],
   },
 });

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -14,11 +14,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "@next/env": "^14.2.7",
+    "@next/env": "^14.2.8",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@resvg/resvg-js": "^2.6.2",
-    "@shikijs/transformers": "^1.16.1",
+    "@shikijs/transformers": "^1.16.2",
     "algoliasearch": "^4.24.0",
     "class-variance-authority": "^0.7.0",
     "fumadocs-core": "workspace:*",
@@ -31,30 +31,30 @@
     "geist": "^1.3.1",
     "hast-util-to-jsx-runtime": "^2.3.0",
     "katex": "^0.16.11",
-    "lucide-react": "^0.437.0",
-    "next": "^14.2.7",
+    "lucide-react": "^0.438.0",
+    "next": "^14.2.8",
     "phenomenon": "^1.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rehype-katex": "^7.0.1",
     "remark-math": "^6.0.0",
     "satori": "^0.10.14",
-    "shiki": "^1.16.1",
+    "shiki": "^1.16.2",
     "tailwind-merge": "^2.5.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.7",
-    "@next/eslint-plugin-next": "^14.2.7",
+    "@next/bundle-analyzer": "^14.2.8",
+    "@next/eslint-plugin-next": "^14.2.8",
     "@types/mdx": "^2.0.13",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
     "eslint-config-custom": "workspace:*",
     "glslify": "^7.1.1",
     "glslx": "^0.3.0",
-    "postcss": "^8.4.42",
+    "postcss": "^8.4.45",
     "tailwindcss": "^3.4.10",
     "tailwindcss-animate": "^1.0.7",
     "tsconfig": "workspace:*",

diff --git a/examples/content-collections/package.json b/examples/content-collections/package.json
@@ -11,7 +11,7 @@
     "@fumadocs/content-collections": "workspace:*",
     "fumadocs-core": "workspace:*",
     "fumadocs-ui": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

diff --git a/examples/i18n/package.json b/examples/i18n/package.json
@@ -11,7 +11,7 @@
     "fumadocs-core": "workspace:*",
     "fumadocs-mdx": "workspace:*",
     "fumadocs-ui": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

diff --git a/examples/next-mdx-og/package.json b/examples/next-mdx-og/package.json
@@ -11,7 +11,7 @@
     "fumadocs-core": "workspace:*",
     "fumadocs-mdx": "workspace:*",
     "fumadocs-ui": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

diff --git a/examples/next-mdx/package.json b/examples/next-mdx/package.json
@@ -11,7 +11,7 @@
     "fumadocs-core": "workspace:*",
     "fumadocs-mdx": "workspace:*",
     "fumadocs-ui": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

diff --git a/examples/openapi/package.json b/examples/openapi/package.json
@@ -13,8 +13,8 @@
     "fumadocs-mdx": "workspace:*",
     "fumadocs-openapi": "workspace:*",
     "fumadocs-ui": "workspace:*",
-    "next": "^14.2.7",
-    "postcss": "^8.4.42",
+    "next": "^14.2.8",
+    "postcss": "^8.4.45",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tailwindcss": "^3.4.10",

diff --git a/examples/remote-mdx/package.json b/examples/remote-mdx/package.json
@@ -11,7 +11,7 @@
     "@fumadocs/mdx-remote": "workspace:*",
     "fumadocs-core": "workspace:*",
     "fumadocs-ui": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },

diff --git a/package.json b/package.json
@@ -18,9 +18,9 @@
   },
   "prettier": "@vercel/style-guide/prettier",
   "devDependencies": {
-    "@changesets/cli": "^2.27.7",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@changesets/cli": "^2.27.8",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "@vercel/style-guide": "^6.0.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",

diff --git a/packages/content-collections/package.json b/packages/content-collections/package.json
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@content-collections/core": "^0.6.4",
     "@content-collections/mdx": "^0.1.3",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "eslint-config-custom": "workspace:*",
     "fumadocs-core": "workspace:*",
     "tsconfig": "workspace:*",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -134,8 +134,8 @@
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
-    "@shikijs/rehype": "^1.16.1",
-    "@shikijs/transformers": "^1.16.1",
+    "@shikijs/rehype": "^1.16.2",
+    "@shikijs/transformers": "^1.16.2",
     "flexsearch": "0.7.21",
     "github-slugger": "^2.0.0",
     "image-size": "^1.1.1",
@@ -146,7 +146,7 @@
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.1",
     "scroll-into-view-if-needed": "^3.1.0",
-    "shiki": "^1.16.1",
+    "shiki": "^1.16.2",
     "swr": "^2.2.5",
     "unist-util-visit": "^5.0.0"
   },
@@ -158,12 +158,12 @@
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.3",
     "@types/negotiator": "^0.6.3",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "algoliasearch": "^4.24.0",
     "eslint-config-custom": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "tsconfig": "workspace:*",
     "unified": "^11.0.5"
   },

diff --git a/packages/create-app-versions/package.json b/packages/create-app-versions/package.json
@@ -9,12 +9,12 @@
     "@content-collections/mdx": "^0.1.3",
     "@content-collections/next": "^0.2.0",
     "@types/mdx": "^2.0.13",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
-    "next": "^14.2.7",
-    "postcss": "^8.4.42",
+    "next": "^14.2.8",
+    "postcss": "^8.4.45",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.10",

diff --git a/packages/create-app/package.json b/packages/create-app/package.json
@@ -29,11 +29,11 @@
   "dependencies": {
     "@clack/prompts": "^0.7.0",
     "cross-spawn": "^7.0.3",
-    "picocolors": "^1.0.1"
+    "picocolors": "^1.1.0"
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.6",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "eslint-config-custom": "workspace:*",
     "fast-glob": "^3.3.1",
     "tsconfig": "workspace:*"

diff --git a/packages/doc-gen/package.json b/packages/doc-gen/package.json
@@ -39,7 +39,7 @@
     "@types/estree": "^1.0.5",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.3",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "eslint-config-custom": "workspace:*",
     "remark": "^15.0.0",
     "tsconfig": "workspace:*",

diff --git a/packages/mdx-remote/package.json b/packages/mdx-remote/package.json
@@ -72,12 +72,12 @@
   "devDependencies": {
     "@types/mdx": "^2.0.13",
     "@types/micromatch": "^4.0.9",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "@types/react": "^18.3.5",
     "@types/ws": "^8.5.12",
     "eslint-config-custom": "workspace:*",
     "fumadocs-core": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "tsconfig": "workspace:*",
     "unified": "^11.0.5",
     "vfile": "^6.0.3"

diff --git a/packages/mdx/package.json b/packages/mdx/package.json
@@ -69,7 +69,7 @@
     "@types/react": "^18.3.5",
     "eslint-config-custom": "workspace:*",
     "fumadocs-core": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "tsconfig": "workspace:*",
     "unified": "^11.0.5",
     "webpack": "^5.90.3"

diff --git a/packages/openapi/package.json b/packages/openapi/package.json
@@ -62,22 +62,22 @@
     "github-slugger": "^2.0.0",
     "hast-util-to-jsx-runtime": "^2.3.0",
     "js-yaml": "^4.1.0",
-    "lucide-react": "^0.437.0",
+    "lucide-react": "^0.438.0",
     "openapi-sampler": "^1.5.1",
     "react-hook-form": "^7.53.0",
     "remark": "^15.0.1",
     "remark-rehype": "^11.1.0",
-    "shiki": "^1.16.1",
+    "shiki": "^1.16.2",
     "swr": "^2.2.5"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "22.5.2",
+    "@types/node": "22.5.4",
     "@types/openapi-sampler": "^1.0.3",
     "@types/react": "^18.3.5",
     "bunchee": "^5.4.0",
     "eslint-config-custom": "workspace:*",
-    "next": "^14.2.7",
+    "next": "^14.2.8",
     "openapi-types": "^12.1.3",
     "tsconfig": "workspace:*"
   },

diff --git a/packages/twoslash/package.json b/packages/twoslash/package.json
@@ -25,7 +25,7 @@
     "types:check": "tsc --noEmit"
   },
   "dependencies": {
-    "@shikijs/twoslash": "^1.16.1",
+    "@shikijs/twoslash": "^1.16.2",
     "mdast-util-from-markdown": "^2.0.1",
     "mdast-util-gfm": "^3.0.0",
     "mdast-util-to-hast": "^13.2.0"
@@ -35,7 +35,7 @@
     "@types/mdast": "^4.0.3",
     "eslint-config-custom": "workspace:*",
     "fumadocs-ui": "workspace:*",
-    "shiki": "^1.16.1",
+    "shiki": "^1.16.2",
     "tsconfig": "workspace:*"
   },
   "peerDependencies": {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -117,21 +117,21 @@
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
     "fumadocs-core": "workspace:*",
-    "lucide-react": "^0.437.0",
+    "lucide-react": "^0.438.0",
     "next-themes": "^0.3.0",
     "react-medium-image-zoom": "^5.2.9",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.2"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.24.0",
-    "@next/eslint-plugin-next": "^14.2.7",
+    "@next/eslint-plugin-next": "^14.2.8",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "algoliasearch": "^4.24.0",
     "eslint-config-custom": "workspace:*",
-    "next": "^14.2.7",
-    "postcss": "^8.4.42",
+    "next": "^14.2.8",
+    "postcss": "^8.4.45",
     "postcss-cli": "^11.0.0",
     "postcss-lightningcss": "^1.0.1",
     "tailwindcss": "^3.4.10",

diff --git a/packages/ui/src/components/layout/edit-on-github.tsx b/packages/ui/src/components/layout/edit-on-github.tsx
@@ -23,7 +23,7 @@ export interface EditOnGitHubOptions
   path: string;
 }
 
-export const EditOnGitHub = forwardRef<HTMLAnchorElement, EditOnGitHubOptions>(
+const EditOnGitHub = forwardRef<HTMLAnchorElement, EditOnGitHubOptions>(
   ({ owner, repo, sha = 'main', path, ...props }, ref) => {
     const { text } = useI18n();
 
@@ -50,3 +50,5 @@ export const EditOnGitHub = forwardRef<HTMLAnchorElement, EditOnGitHubOptions>(
 );
 
 EditOnGitHub.displayName = 'EditOnGitHub';
+
+export default EditOnGitHub;
diff --git a/packages/ui/src/docs-layout.client.tsx b/packages/ui/src/docs-layout.client.tsx
@@ -72,3 +72,5 @@ export { LinksMenu } from '@/components/layout/link-item';
 export { Sidebar } from './components/layout/sidebar';
 export { TreeContextProvider } from './contexts/tree';
 export { ThemeToggle } from './components/layout/theme-toggle';
+export { LanguageToggle } from './components/layout/language-toggle';
+export { DynamicSidebar } from './components/layout/dynamic-sidebar';