.mdx 文件中的 React 组件和数学表达式在 Next.js 应用程序中未正确呈现

Question

我的自定义 React 组件在导入 .mdx 文件时根本不会被渲染。 尽管遵循 Next.js ( https://nextjs.org/docs/advanced-features/using-mdx ) 和 MDX 文档 ( https://mdxjs.com/guides/math/ ）。

这是我的配置：

//next.config.js
/** @type {import('next').NextConfig} */

const remarkMath = import('remark-math');
const rehypeKatex = import('rehype-katex');

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },
})
module.exports = withMDX({
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  reactStrictMode: true
})


//package.json

  "dependencies": {
    "@mdx-js/loader": "^2.1.1",
    "@next/mdx": "^12.1.5",
    "fs": "^0.0.1-security",
    "gray-matter": "^4.0.3",
    "next": "12.1.5",
    "path": "^0.12.7",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "recharts": "^2.1.9",
    "rehype-katex": "^6.0.2",
    "remark": "^14.0.2",
    "remark-html": "^15.0.1",
    "remark-math": "^5.1.1"
  },
  "devDependencies": {
    "@types/node": "17.0.25",
    "@types/react": "18.0.5",
    "@types/react-dom": "18.0.1",
    "eslint": "8.13.0",
    "eslint-config-next": "12.1.5",
    "typescript": "4.6.3"
  }

这是我的自定义 Document 组件，允许应用获取 katex.min.css 文件：

//_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
    return (
        <Html>
            <Head>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css" integrity="sha384-KiWOvVjnN8qwAZbuQyWDIbfCLFhLXNETzBQjA/92pIowpC0d2O3nppDGQVgwd2nB" crossOrigin="anonymous"/>
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

我做错了什么？

Answer 1

如果有错误，可能你不能使用 require ，所以你没有成功导入插件。 您必须在配置文件中使用导入方法并使用 MDXProvider 包装。

.mdx 文件中的 React 组件和数学表达式在 Next.js 应用程序中未正确呈现

问题描述

1 个解决方案

解决方案1
0 2022-06-18 18:36:26

.mdx 文件中的 React 组件和数学表达式在 Next.js 应用程序中未正确呈现

问题描述

1 个解决方案

解决方案1 0 2022-06-18 18:36:26

解决方案1
0 2022-06-18 18:36:26