1

假设和我想要实现的目标。

请注意，此问题已由 Deepl Translations 翻译。

我想在 Next.js 中使用 mdx-js/react 来加载 mdx 文件。

环境。

操作系统：macOS Bigsur

节点：16.3

反应：17.0.2

下一个：12.0.7

我们将 npm 用于包。另外，我们不使用 Docker。

配置

包.json

{
  "private": true,
  "scripts": {
    ~
  },
  "dependencies": {
    "@chakra-ui/react": "^1.7.3",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@mapbox/rehype-prism": "^0.8.0",
    "@mdx-js/loader": "^1.6.22",
    "@mdx-js/react": "^2.0.0-rc.2",
    "@next/mdx": "^12.0.7",
    "@types/prismjs": "^1.16.6",
    "babel-plugin-prismjs": "^2.1.0",
    "date-utils": "^1.2.21",
    "framer-motion": "^5.5.5",
    "fs": "^0.0.1-security",
    "glob": "^7.1.7",
    "gray-matter": "^4.0.3",
    "install": "^0.13.0",
    "moment": "^2.29.1",
    "next": "12.0.7",
    "next-compose-plugins": "^2.2.1",
    "npm": "^8.3.0",
    "postcss": "^8.2.15",
    "prismjs": "^1.25.0",
    "raw-loader": "^4.0.2",
    "react": "17.0.2",
    "react-burger-menu": "^3.0.6",
    "react-dom": "^17.0.2",
    "react-iframe": "^1.8.0",
    "react-markdown": "^7.1.1",
    "react-modern-drawer": "^1.0.1",
    "react-router-dom": "^6.2.1",
    "react-syntax-highlighter": "^15.4.5",
    "react-twitter-widgets": "^1.10.0",
    "rehype-katex": "^6.0.2",
    "remark-gfm": "^3.0.1",
    "remark-math": "^5.1.1",
    "remove-markdown": "^0.3.0",
    "sass": "^1.45.1",
    "sharp": "^0.29.3",
    "typescript": "^4.5.4",
    "webpack": "^5.65.0"
  },
  "devDependencies": {
    "@stylelint/postcss-css-in-js": "^0.37.2",
    "@types/node": "16.11.11",
    "@types/react": "17.0.37",
    "eslint": "8.4.0",
    "eslint-config-next": "12.0.7",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.1"
  },
}

next.config.js

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

module.exports = {
  reactStrictMode: true,
  overrides: [
    {
      files: ["**/*.{jsx,tsx}"],
      customSyntax: "@stylelint/postcss-css-in-js",
    },
  ],
};
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/
});
module.exports = withMDX({
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
})

代码

_app.tsx

import { AppProps } from 'next/app'
import Head from 'next/head'
import 'styles/globals.scss'
import { MDXProvider} from '@mdx-js/react'


const App = ({ Component, pageProps }: AppProps) => (
  <>
    <Head>
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
      />
      {/* <link rel="shortcut icon" href="/favicon.png" key="shortcutIcon" /> */}
      {/* <link rel="manifest" href="/manifest.json" /> */}
    </Head>
    <MDXProvider>
      <Component {...pageProps} />
    </MDXProvider>
  </>
)

export default App

样本.tsx

import Head from 'next/head';
import React from "react";
import Layout from 'components/Layout';
import MD from '~/test1_md.mdx';
import { Article, Button } from 'components/Layout_parts';
import Article_styles from '~/style.module.scss';

export default function Test1() {
  return(
    <>
      <Head>
        <title>SAMPLE</title>
      </Head>
      <Layout title={"ホーム&quot;}>
        <Article>
            <MD/>
        </Article>
      </Layout>
    </>
  )
}

错误描述

TypeError: (0 , _mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx) is not a function
  18 |   return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
  19 | 
> 20 |     <h1>{`Headline1`}</h1>
     |     ^
  21 |     <h2>{`Headline2`}</h2>
  22 |     <h3>{`Headline3`}</h3>
  23 |     <p>{`paragraph`}</p>

我尝试过的事情

  1. 检查错误消息
  2. 重新安装库
  3. 用一个新项目进行测试
4

0 回答 0