无法从 gatsby-plugin-mdx 导入 MDXRenderer

Posted 2023-02-23

【中文标题】无法从 gatsby-plugin-mdx 导入 MDXRenderer

【英文标题】：Can't Import MDXRenderer from gatsby-plugin-mdx

【发布时间】：2020-02-03 03:41:00

【问题描述】：

我目前正在使用 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(7016) 的新声明（.d.ts）文件

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

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

感谢任何帮助！

【参考方案1】：

改用import MDXRenderer from 'gatsby-plugin-mdx'。注意大写的MDX

【讨论】：

成功了！谢谢！我很高兴现在一切正常，但很遗憾这不是更复杂的事情......情绪的旋风正在发生。