Skip to main content

Netlify CMSで書いた太文字がGatsbyで壊れている

· 6 min read
hand-dot(Kyohei Fukuda)

Gatsbyでの表示。 **　が表示されている。なんで。

CleanShot20220223at234425

結論: gatsby-transformer-remarkと netlify-cms-app が依存しているremark-parse のバージョンが違うから

CleanShot20220223at235559

Netlify CMSでは壊れていない。Markdownを変更した覚えはないのにあれー

本日の作業​

labelmake.jp

 ERROR

Page data from page-data.json for the failed page "/blog/on-demand-printing-demerit/": {
  "componentChunkName": "component---src-templates-blog-post-tsx",
  "path": "/blog/on-demand-printing-demerit/",
  "result": {
    "data": {
      "markdownRemark": {
        "id": "a7ec6e96-7b33-5342-8235-a347acc231e2",
        "html": "<ul>\n<li><strong>デメリット:大量に印刷する場合値段が高くなる。...",
        "excerpt": "…",
        "fields": {
          "slug": "/blog/on-demand-printing-demerit/"
        },
        "frontmatter": {
          "datePublished": "2020/02/19"
          ...
          "thumbnail": null,
        }
   ...
}

failed Building static HTML for pages - 2.978s

 ERROR #95313

Building static HTML failed for path "/blog/on-demand-printing-demerit/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  291 |             excerpt: post.excerpt,
  292 |           }}
> 293 |           postImage={getSrc(post.frontmatter.thumbnail.childImageSharp)}
      |                                                        ^
  294 |         />
  295 |       }
  296 |       tags={post.frontmatter.tags}


  WebpackError: TypeError: Cannot read properties of null (reading 'childImageSharp')

  - blog-post.tsx:293
    labelmake.jp/src/templates/blog-post.tsx:293:56

サムネイルの生成でこけている

外部の画像の取得でおかしくなっているっぽい https://www.gatsbyjs.com/docs/how-to/images-and-media/preprocessing-external-images/ 　を参照するべき

https://github.com/gatsbyjs/gatsby/issues/4123#issuecomment-771925663

https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#extensions-and-directives

にあるが Frontmatterの画像はfileByRelativePathに定義しないといけないっぽい 参考: https://poppotennis.com/posts/gatsby-thumbnail#gatsby-nodejs-%E3%82%92%E7%B7%A8%E9%9B%86%E3%81%99%E3%82%8B

動いた! https://stackoverflow.com/questions/57152625/use-absolute-path-for-featured-image-in-markdown-post-with-gatsby ↑を参考にサムネイルをパスをいじって参照できるようにした。

exports.createSchemaCustomization = ({ actions }) => {
  const { createFieldExtension, createTypes } = actions;

  createFieldExtension({
    name: "fileByDataPath",
    extend: () => ({
      resolve: (src, args, context, info) => {
        const partialPath = src.thumbnail.replaceAll("../", "");
        if (!partialPath) {
          return null;
        }

        const filePath = path.join(__dirname, partialPath);

        const fileNode = context.nodeModel.runQuery({
          firstOnly: true,
          type: "File",
          query: {
            filter: {
              absolutePath: {
                eq: filePath,
              },
            },
          },
        });

        if (!fileNode) {
          return null;
        }

        return fileNode;
      },
    }),
  });

  createTypes(`
    type Frontmatter @infer {
      datePublished: Date @dateformat
      dateModified: Date @dateformat
      title: String
      description: String
      slug: String
      tags: [String!]
      templateKey: String
      thumbnail: File @fileByDataPath
    }

    type MarkdownRemark implements Node @infer {
      frontmatter: Frontmatter
    }
  `);
};

ローカルでビルドできるようになったけど、netlifyでのビルドでコケる netlifyのnodeのバージョンが古いので上げるか　一旦ローカルで同じ環境にして同じエラーがでるか確認

同じエラーが出たのでこれはnetlifyでのnodeバージョンを上げるしかないかも上げてビルドしてみる -> 動いた

さてようやく本題に取り掛かれる

さっと調べたら関連しそうなissueを発見

https://github.com/netlify/netlify-cms/issues/3727 https://github.com/remarkjs/remark/issues/908

やりたいこととしては表示を直したいんだけど、そもそもプレビューと同じ見た目になっていないのがおかしい。 なので、netlify-cmsがmarkdownを処理する際に何のパッケージを使っているのか、 また、それと同じパッケージの同じバージョンでgatsbyにmarkdownを処理させたい。

unified というパッケージがyarn-lockファイル内でバージョンが混在していた

unified "^9.2.2"
unified "^7.1.0"
unified "^9.0.0"
unified "^9.1.0"
unified@^7.1.0:
unified/-/unified-7.1.0.tgz"
unified@^9.0.0, unified@^9.1.0, unified@^9.2.2:
unified/-/unified-9.2.2.tgz"

gatsbyは9系、netlify-cmsは7系を使っているっぽい(最新は10系)

同様に remark-parseというパッケージも下記のように混在している

remark-parse "^9.0.0"
remark-parse "^6.0.3"
remark-parse "^9.0.0"
remark-parse@^6.0.3:
remark-parse/-/remark-parse-6.0.3.tgz"
remark-parse@^9.0.0:
remark-parse/-/remark-parse-9.0.0.tgz"
remark-parse "^9.0.0"

おそらくここらへんのパッケージを同じものを使うようにすれば動きを合わせられるはず。 とりあえずremark-parseを yarnのresolutionsを使って固定する

下記を追加することでプレビューと同じ(半角スペースがなくても太文字が表示される)挙動にすることができた

  "resolutions": {
    "remark-parse": "^6.0.3"
  }

なんか納得がいかないがとりあえず壊れた表示を直すことができた

CleanShot20220223at235113

とりあえず、https://github.com/remarkjs/remark/issues/908 をsubscribeしておく 半角なしでOKだったのに途中からありじゃないとダメってのはちょっと〜世間は許してくれあせんよ

CleanShot20220224at000122

pdfme

明日の作業​

labelmake.jp

pdfme

日記​