在.mdx应用程序中，未正确呈现Next.js文件中的组件和数学表达式
在.mdx应用程序中，未正确呈现Next.js文件中的组件和数学表达式
提问于 2022-04-24 17:49:25
当导入到.mdx文件中时，我的自定义响应组件根本没有呈现。.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"
}下面是我的自定义文档组件，它允许应用程序获取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>
)
}为什么我做的不对？
回答 1
Stack Overflow用户
发布于 2022-06-18 18:36:26
如果存在错误，可能无法使用require，因此无法成功导入插件。您必须在配置文件中使用导入方法，并使用MDXProvider包装。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71990912
复制相关文章
相似问题
腾讯云开发者
