diff --git a/next.config.js b/next.config.js index 2289a7082..0dd3e6bef 100644 --- a/next.config.js +++ b/next.config.js @@ -2,6 +2,7 @@ const isProd = process.env.NODE_ENV === "production"; const nextConfig = { + transpilePackages: ["next-mdx-remote-client"], webpack: (config) => { config.resolve.fallback = { fs: false }; diff --git a/package.json b/package.json index efb1f600f..99ddc40bb 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,8 @@ "lexical": "0.12.5", "material-ripple-effects": "2.0.1", "mdx-observable": "0.2.0", - "next": "13.1.1", - "next-mdx-remote": "4.2.0", + "next": "13.5.6", + "next-mdx-remote-client": "^1.1", "nouislider": "15.6.1", "prismjs": "1.29.0", "prop-types": "15.8.1", @@ -88,7 +88,7 @@ "autoprefixer": "10.4.13", "cross-spawn": "7.0.3", "eslint": "8.31.0", - "eslint-config-next": "12.3.4", + "eslint-config-next": "13.5.6", "eslint-config-prettier": "8.5.0", "fs": "0.0.1-security", "kolorist": "1.8.0", diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx index 59788e314..43b345314 100644 --- a/pages/docs/[...slug].tsx +++ b/pages/docs/[...slug].tsx @@ -8,9 +8,9 @@ import { useRouter } from "next/router"; import fs from "fs"; import matter from "gray-matter"; import remarkGfm from "remark-gfm"; -import { MDXRemote } from "next-mdx-remote"; +import { MDXClient } from "next-mdx-remote-client"; import rehypePrettyCode from "rehype-pretty-code"; -import { serialize } from "next-mdx-remote/serialize"; +import { serialize } from "next-mdx-remote-client/serialize"; // @widgets import { @@ -458,6 +458,23 @@ export default function Page({ frontMatter, mdxSource, slug }) { ? headLink.replace("html/", "react/") : headLink; + if ("error" in mdxSource) { + return ( + <> + + Error + + +
+

+ Failed to load this page: {String(mdxSource.error?.message ?? "Unknown error")} +

+
+