CODEWITHSUNDEEP
reactjsimportcomponentsgatsby
Cameron Walsh
Cameron Walsh

Reputation: 78

Can't Import MDXRenderer from gatsby-plugin-mdx

I'm currently building a gatsby site with mdx. I installed gatsby-plugin-mdx as the getting started guide said: "npm install --save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react" The website works great until I get to where I try to use MDXRenderer to render the content from my mdx file onto the page.

Below is my code for the problem page:

//==========================================================
// 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
      }
    }
  }
`

If I remove

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

and

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

the page works great (without any content). The graphQL query works as it should and gives me the proper data that is still left (the title).

When I reintroduce this code back into the file, two things happen.

1) when I hover over gatsby-plugin-mdx in vscode I get the following error: Could not find a declaration file for module 'gatsby-plugin-mdx'. 'c:/path-to-file/gatsby-site/node_modules/gatsby-plugin-mdx/index.js' implicitly has an 'any' type. Try npm install @types/gatsby-plugin-mdx if it exists or add a new declaration (.d.ts) file containing declare module 'gatsby-plugin-mdx';ts(7016)

2) I get "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of LearnTemplate" when I try to render the page on the browser.

Any help is appreciated!

Upvotes: 1

Views: 1469

Answers (1)

Mark Michon
Mark Michon

Reputation: 735

Try import { MDXRenderer } from 'gatsby-plugin-mdx' instead. Note the capital MDX

Upvotes: 2

Related Questions