Gatsby.js製のブログでMarkdownからMDXに移行する方法【gatsby-plugin-mdx】

import { Chart } from './chartComponent.js';
export const year = new Date().getFullYear(); // 今年の西暦

# 今年は何年？
今年は {year} 年です。  
このように、**JavaScriptを使って変数を埋め込む**ことができます。  
また、以下のようにjsxのコンポーネントを埋め込むことができます。  

<Chart size="middle" year={year} />

<div className="center">
  <img src="./test.jpg" />
</div>

"dependencies": {
  "gatsby": "^4.25.2",

npm install gatsby@{アップデートしたいバージョン}

yarn upgrade gatsby@{アップデートしたいバージョン}

npm install gatsby-plugin-canonical-urls@{アップデートしたいバージョン}

yarn upgrade gatsby-plugin-canonical-urls@{アップデートしたいバージョン}

npm uninstall gatsby-transformer-remark

yarn remove gatsby-transformer-remark

npm install @mdx-js/react gatsby-plugin-mdx

yarn add @mdx-js/react gatsby-plugin-mdx

{
- resolve: `gatsby-transformer-remark`
+ resolve: `gatsby-plugin-mdx`
  options: {
-   plugins: [
+   gatsbyRemarkPlugins: [

{
    resolve: `gatsby-plugin-mdx`,
    options: {
      extensions: [`.md`, `.mdx`], //変更する行
    },
  },

+ const indexTemplate = path.resolve("src/pages/index.js")

  // Get all markdown blog posts sorted by date
  const result = await graphql(
    `
      {
-       postsRemark: allMarkdownRemark(
+       postsRemark: allMdx(
          sort: { fields: [frontmatter___date], order: ASC }
          limit: 2000
        ) {
          totalCount
          nodes {
            id
            fields {
              slug
            }
            frontmatter {
              tags
            }
+           internal {
+             contentFilePath
+           }
          }
        }
-       tagsGroup: allMarkdownRemark(limit: 2000) {
+       tagsGroup: allMdx(limit: 2000) {

  for (let i = 0; i < pageCount; i++) {
    createPage({
      path: i === 0 ? `/` : `/pages/${i + 1}/`,
-     component: path.resolve("src/pages/index.js"),
+     component: indexTemplate,
      context: {
        index: i,

  // Create blog posts pages
  // But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js)
  // `context` is available in the template as a prop and as a variable in GraphQL
  if (posts.length > 0) {
    posts.forEach((post, index) => {
      const previousPostId = index === 0 ? null : posts[index - 1].id
      const nextPostId = index === posts.length - 1 ? null : posts[index + 1].id

      createPage({
        path: post.fields.slug,
-       component: blogPost,
+       component: `${blogPost}?__contentFilePath=${post.internal.contentFilePath}`,
        context: {
          id: post.id,
          previousPostId,

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

- if (node.internal.type === `MarkdownRemark`) {
+ if (node.internal.type === `Mdx`) {

-   type MarkdownRemark implements Node {
-     frontmatter: Frontmatter
+   type Mdx implements Node {
+     frontmatter: MdxFrontmatter

-   type Frontmatter {
+   type MdxFrontmatter {

- const BlogPostTemplate = ({ data, location }) => {
+ const BlogPostTemplate = ({ data, location, children }) => {

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
      }
    }
    mdx(id: { eq: $id }) {
      id
      excerpt(pruneLength: 100)
-     html

-       <section
-         dangerouslySetInnerHTML={{ __html: post.html }}
-         itemProp="articleBody"
-       />
+       <section itemProp="articleBody">
+         {children}
+       </section>

Unknown argument "truncate" on field "Mdx.excerpt".

- excerpt(truncate: true, pruneLength: 100)
+ excerpt(pruneLength: 100)

ERROR 

Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: C:\Users\{UserName}\{Your path to repository}\content\blog\js-transform-image-web-animations-api\index.md: Invalid left-hand side in prefix operation.  
(1:2)

> 1 | ---
    |   ^
  2 | title: "～"

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

npm install remark-unwrap-images@2.1.0

yarn add remark-unwrap-images@2.1.0

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        gatsbyRemarkPlugins: [
          ...
        ],
+       mdxOptions: {
+         remarkPlugins: [
+           // fix an error
+           require(`remark-unwrap-images`),
+         ]
+       }
      },
    },

|aaa|bbb|ccc|
|:---:|:---:|:---:|
|ddd|eee|fff|

~~取り消し内容~~

https://bel-itigo.com/

npm install remark-gfm@^1

yarn add remark-gfm@^1

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        gatsbyRemarkPlugins: [
          ...
        ],
        mdxOptions: {
          remarkPlugins: [
+           // Add GitHub Flavored Markdown (GFM) support
+           require(`remark-gfm`),
            // fix an error
            require(`remark-unwrap-images`),
          ]
        }
      },
    },