无法从gatsby- MDXRenderer -mdx导入插件

Question

我目前正在使用mdx构建一个gatsby站点。我按照入门指南的说明安装了gatsby-plugin-mdx："npm install --save 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:/path-to-file/gatsby-site/node_modules/gatsby-plugin-mdx/index.js‘隐式具有“”any“”类型。“尝试npm install @types/gatsby-plugin-mdx (如果存在)或添加包含declare module 'gatsby-plugin-mdx';ts的新声明(.d.ts)文件(7016)

2) I get“元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但get: undefined。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

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

如有任何帮助，我们不胜感激！

Answer 1

请尝试使用import { MDXRenderer } from 'gatsby-plugin-mdx'。注意大写的MDX