mirror of
https://github.com/hanzo-docs/docs.git
synced 2026-10-25 04:20:02 +00:00
UI: Fix Next.js 14.2.8 dynamic import problems
This commit is contained in:
fuma-nama
@@ -0,0 +1,6 @@
|
||||
---
|
||||
'fumadocs-core': patch
|
||||
'fumadocs-ui': patch
|
||||
---
|
||||
|
||||
Fix Next.js 14.2.8 dynamic import problems
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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],
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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:*",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
+3
-3
@@ -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",
|
||||
|
||||
@@ -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:*",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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:*"
|
||||
|
||||
@@ -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:*",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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:*"
|
||||
},
|
||||
|
||||
@@ -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": {
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
"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",
|
||||
@@ -125,13 +125,13 @@
|
||||
},
|
||||
"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",
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -2,7 +2,6 @@ import type { PageTree } from 'fumadocs-core/server';
|
||||
import type { ReactNode, HTMLAttributes } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { MoreHorizontal } from 'lucide-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { cn } from '@/utils/cn';
|
||||
import { buttonVariants } from '@/theme/variants';
|
||||
@@ -16,23 +15,12 @@ declare const {
|
||||
SidebarCollapseTrigger,
|
||||
ThemeToggle,
|
||||
SubNav,
|
||||
LanguageToggle,
|
||||
LinksMenu,
|
||||
DynamicSidebar,
|
||||
Sidebar,
|
||||
}: typeof import('./docs-layout.client');
|
||||
|
||||
// We can use dynamic imports to avoid loading a client component when they are not used
|
||||
const LanguageToggle = dynamic(() =>
|
||||
import('./components/layout/language-toggle').then(
|
||||
(mod) => mod.LanguageToggle,
|
||||
),
|
||||
);
|
||||
|
||||
const DynamicSidebar = dynamic(() =>
|
||||
import('./components/layout/dynamic-sidebar').then(
|
||||
(mod) => mod.DynamicSidebar,
|
||||
),
|
||||
);
|
||||
|
||||
export type { LinkItemType };
|
||||
|
||||
interface SidebarOptions extends Omit<SidebarProps, 'items'> {
|
||||
|
||||
@@ -19,8 +19,8 @@ declare const {
|
||||
}: typeof import('./page.client');
|
||||
|
||||
const ClerkTOCItems = dynamic(() => import('@/components/layout/toc-clerk'));
|
||||
const EditOnGitHub = dynamic(() =>
|
||||
import('@/components/layout/edit-on-github').then((mod) => mod.EditOnGitHub),
|
||||
const EditOnGitHub = dynamic(
|
||||
() => import('@/components/layout/edit-on-github'),
|
||||
);
|
||||
|
||||
type TableOfContentOptions = Omit<TOCProps, 'items' | 'children'> &
|
||||
|
||||
Generated
+541
-446
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user