Невозможно импортировать MDXRenderer из gatsby-plugin-mdx - PullRequest
Новая
       19

Невозможно импортировать MDXRenderer из gatsby-plugin-mdx

0 голосов
/ 04 октября 2019

В настоящее время я создаю сайт gatsby с помощью mdx. Я установил gatsby-plugin-mdx, так как руководство по началу работы гласило: «npm install - сохранить gatsby-plugin-mdx @ mdx-js / mdx @ mdx-js / реагировать» Веб-сайт прекрасно работает, пока не доберусь до места, где я пытаюсьиспользуйте 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)при наведении указателя мыши на gatsby-plugin-mdx в vscode я получаю следующую ошибку: Не удалось найти файл объявления для модуля 'gatsby-plugin-mdx'. 'c: /path-to-file/gatsby-site/node_modules/gatsby-plugin-mdx/index.js' неявно имеет тип 'any'. Попробуйте npm install @types/gatsby-plugin-mdx, если он существует, или добавьте файл нового объявления (.d.ts), содержащий declare module 'gatsby-plugin-mdx'; ts (7016)

2) Я получаю «Тип элемента недопустим: ожидается строка (для встроенногов компонентах) или класс / функция (для составных компонентов), но получили: undefined. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли смешать импорт по умолчанию и с именами.

Проверкаметод рендеринга LearnTemplate ", когда я пытаюсь отобразить страницу в браузере.

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 05 октября 2019

Попробуйте import { MDXRenderer } from 'gatsby-plugin-mdx' вместо. Обратите внимание на заглавную MDX

...