无法从gatsby-plugin-mdx导入MDXRenderer

Question

我目前正在使用mdx构建一个gatsby网站。正如入门指南所述，我安装了gatsby-plugin-mdx：“ npm install-保存gatsby-plugin-mdx @ mdx-js / mdx @ mdx-js / react”在我尝试使用MDXRenderer将mdx文件中的内容呈现到页面上之前，该网站可以正常运行。

下面是我在问题页面上的代码：

//==========================================================
// Import needed files
//==========================================================
import React, { Component } from 'react'
import Link from 'gatsby-link'
import { MdxRenderer } from 'gatsby-plugin-mdx'
import 'bulma/css/bulma.css'
import './learn-post.css'
import { graphql } from 'gatsby'

// Import needed components
//==========================================================

import MasterLayout from '../components/Layouts/master-layout'
import ContentWrapper from '../components/Layouts/content-wrapper'
import LearnTitle from '../components/Learn/learntitle'
import Footer from '../components/footer'
import NavbarOnlyLayout from '../components/Layouts/navbaronly-layout'

//==========================================================
// Page Setup
//==========================================================

export default class LearnTemplate extends Component {
    render() {
    const mdx = this.props.data.mdx    
    const title = mdx.frontmatter.title

        return(
            <MasterLayout>
                <NavbarOnlyLayout>
                    <ContentWrapper>
                        <LearnTitle 
                            title = {title}
                        />
                        <div class = "learn-content">
                            <MdxRenderer>{mdx.body}</MdxRenderer>           
                        </div>
                        <Link to="/learn">Go Back</Link>
                    </ContentWrapper>              
                </NavbarOnlyLayout>
                <Footer />
            </MasterLayout>
        )

      }
}

// GraphQL Query
//==========================================================
export const postQuery = graphql`
  query LearnPostQuery($id: String!) {
    mdx(id: {eq: $id }) {
      id
      body
      frontmatter {
        title
      }
    }
  }
`

如果我删除

import { MdxRenderer } from 'gatsby-plugin-mdx'

和

<MdxRenderer>{mdx.body}</MdxRenderer> 

页面效果很好（没有任何内容）。 graphQL查询可以正常工作，并为我提供仍然剩余的正确数据（标题）。

当我将此代码重新引入文件时，会发生两件事。

1）当我将鼠标悬停在vscode中的gatsby-plugin-mdx上时，出现以下错误：找不到模块“ gatsby-plugin-mdx”的声明文件。 “ c：/文件路径/gatsby-site/node_modules/gatsby-plugin-mdx/index.js”隐式具有“ any”类型。如果存在npm install @types/gatsby-plugin-mdx，请尝试使用它；或者添加一个包含declare module 'gatsby-plugin-mdx'; ts（7016）

的新声明（.d.ts）文件

2）我得到“元素类型无效：预期使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。

当我尝试在浏览器上呈现页面时，请检查LearnTemplate的呈现方法。

感谢您的任何帮助！

Answer 1

改为尝试import { MDXRenderer } from 'gatsby-plugin-mdx'。注意大写的MDX