ホーム > Gatsby > 【Gatsby.js】MDXProviderのエラー解決方法 'Warning: The tag <item> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.'
Gatsby

【Gatsby.js】MDXProviderのエラー解決方法 'Warning: The tag <item> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.'

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 解決方法
  2. 終わりに
PR

Gatsby.js で、MDXProvider のエラー

Warning: The tag <item> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

と出たときの解決方法についてまとめました。

解決方法

エラー文のとおり、アッパーケースで書かないとエラーになるようです。

正しい例

import { MDXProvider } from "@mdx-js/react"
import ItemComponent from "../components/item"

const components = {
  Item: ItemComponent,
}

const BlogPostTemplate = ({ data, location, children }) => {
  return <MDXProvider components={components}>{children}</MDXProvider>
}

export default BlogPostTemplate

ダメな例

const components = {
  item: ItemComponent,
}

終わりに

.mdから.mdxに移行中、

import RehypeReact from "rehype-react"

const renderAst = new RehypeReact({
  createElement: React.createElement,
  components: {
    item: ItemComponent,
  },
}).Compiler

こんな感じで書いていたやつを mdx でも動かすために起きたバグでした。

誰かの参考になればと思います。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。