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

Question

My custom React components when imported in a .mdx file, are not being rendered at all.我的自定义 React 组件在导入 .mdx 文件时根本不会被渲染。 The math expressions in the .mdx file either render unformatted or throw parsing errors in spite of following the configuration instructions in the Next.js ( https://nextjs.org/docs/advanced-features/using-mdx ) and MDX documentation ( https://mdxjs.com/guides/math/ ).尽管遵循 Next.js ( https://nextjs.org/docs/advanced-features/using-mdx ) 和 MDX 文档 ( https://mdxjs.com/guides/math/ ）。

Here are my configurations:这是我的配置：

//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"
  }

Here is my custom Document component to allow the app to fetch the katex.min.css file:这是我的自定义 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>
    )
}

What is it that I'm not doing correctly?我做错了什么？

Answer 1

If there are errors, probably you can't use require and so you didn't import the plugins successfully.如果有错误，可能你不能使用 require ，所以你没有成功导入插件。 You have to use import method in config file and use the MDXProvider wrap.您必须在配置文件中使用导入方法并使用 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