Cannot read property 'className' of undefined (gatsby-transformer-remark v4+)

Hi guys,

Description

After upgrading the gatsby-transformer-remark from v3 to v4, blog queries stopped working. Gatsby throws an error:

success run static queries - 1.053s - 8/8 7.60/s

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot read property 'className' of undefined

   1 | query homer007ProjectsociussrctemplatesblogPostJs1196972383($slug: String!) {
   2 |   markdownRemark(fields: {slug: {eq: $slug}}) {
>  3 |     html
     |     ^
   4 |     frontmatter {
   5 |       title
   6 |       date(formatString: "DD MMMM, YYYY")
   7 |       author
   8 |     }
   9 |     excerpt
  10 |   }
  11 | }
  12 |

File path: /home/r007/Projects/ocius/src/templates/blogPost.js
Url path: /blog/ocius-successfully-completes-seatrials/
Plugin: none



  TypeError: Cannot read property 'className' of undefined
  
  - list.js:25 list
    [ocius]/[mdast-util-to-hast]/lib/handlers/list.js:25:31
  
  - one.js:37 one
    [ocius]/[mdast-util-to-hast]/lib/one.js:37:51
  
  - all.js:16 all
    [ocius]/[mdast-util-to-hast]/lib/all.js:16:14
  
  - paragraph.js:8 paragraph
    [ocius]/[mdast-util-to-hast]/lib/handlers/paragraph.js:8:23
  
  - one.js:37 one
    [ocius]/[mdast-util-to-hast]/lib/one.js:37:51
  
  - all.js:16 all
    [ocius]/[mdast-util-to-hast]/lib/all.js:16:14
  
  - root.js:10 root
    [ocius]/[mdast-util-to-hast]/lib/handlers/root.js:10:41
  
  - one.js:37 one
    [ocius]/[mdast-util-to-hast]/lib/one.js:37:51
  
  - index.js:122 toHast
    [ocius]/[mdast-util-to-hast]/lib/index.js:122:14
  
  - extend-node-type.js:343 markdownASTToHTMLAst
    [ocius]/[gatsby-transformer-remark]/extend-node-type.js:343:14
  
  - extend-node-type.js:359 getHTMLAst
    [ocius]/[gatsby-transformer-remark]/extend-node-type.js:359:25
  
  - runMicrotasks
  
  - task_queues.js:58 runNextTicks
    internal/process/task_queues.js:58:5
  
  - timers.js:434 processImmediate
    internal/timers.js:434:9
  
  - extend-node-type.js:372 getHTML
    [ocius]/[gatsby-transformer-remark]/extend-node-type.js:372:21
  
  - async Promise.all
  

not finished run page queries - 5.331s

After downgrade back to v3.2.0, the issue is fixed.

Steps to reproduce

1. git clone https://github.com/ocius/website ocius
2. cd ocius
3. git checkout redesign-stage-1
4. npm install gatsby-transformer-remark --save
5. gatsby build

Environment

  System:
    OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
    CPU: (8) x64 Intel(R) Core(TM) i7-2600K CPU @ 3.40GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 7.11.2 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 88.0
  npmPackages:
    gatsby: ^3.4.0 => 3.4.0 
    gatsby-awesome-pagination: ^0.3.8 => 0.3.8 
    gatsby-background-image: ^1.5.3 => 1.5.3 
    gatsby-plugin-advanced-sitemap: ^1.6.0 => 1.6.0 
    gatsby-plugin-gtag: ^1.0.13 => 1.0.13 
    gatsby-plugin-image: ^1.4.0 => 1.4.0 
    gatsby-plugin-mailchimp: ^5.2.2 => 5.2.2 
    gatsby-plugin-optimize-svgs: ^1.0.5 => 1.0.5 
    gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0 
    gatsby-plugin-sharp: ^3.4.0 => 3.4.0 
    gatsby-plugin-styled-components: ^4.4.0 => 4.4.0 
    gatsby-remark-copy-linked-files: ^4.1.0 => 4.1.0 
    gatsby-remark-images: ^5.1.0 => 5.1.0 
    gatsby-remark-images-grid: ^1.1.2 => 1.1.2 
    gatsby-remark-responsive-iframe: ^4.1.0 => 4.1.0 
    gatsby-source-filesystem: ^3.4.0 => 3.4.0 
    gatsby-transformer-remark: ^3.2.0 => 3.2.0 
    gatsby-transformer-sharp: ^3.4.0 => 3.4.0 
    gatsby-transformer-yaml: ^3.4.0 => 3.4.0 
  npmGlobalPackages:
    gatsby-cli: 3.4.0

[hendra-go]

I also use gatsby-remark-images-grid and faced same problem around a month ago when i upgraded to gatsby@3.3.0 i fixed it by change gatsby-remark-images-grid to local plugins and modify its index.js

from this:

...
    const gridNode = {
      type: "list",
      data: {
        hName: "div",
        hProperties: {
          className: `${className}-grid`,
          style: `
            grid-template-columns: repeat(auto-fill, minmax(${
              Math.floor(100 / columnsCount) - 2
            }%, 1fr));
          `,
        },
      },
      children: imagesNodes,
    }
...

to this:

...
    const gridNode = {
      type: "parent",
      data: {
        hName: "div",
        hProperties: {
          className: `${className}-grid`,
          style: `
            grid-template-columns: repeat(auto-fill, minmax(${
              Math.floor(100 / columnsCount) - 2
            }%, 1fr));
          `,
        },
      },
      children: imagesNodes,
    }
...

notice the type, changed from list to parent

I haven’t notified @cedricdelpoux yet because frankly i am not really sure about this fix. But until now gatsby-remark-images-grid in my project works fine with the latest remark (micromark)

It seems that the new remark (micromark) is more strict? (i don’t know the best term for this), if the mdast node type is list it expects hName to be ul or ol or i don’t know… can anybody tell me is there any documentation about micromark that mention this? i haven’t found it yet.

[r007]

Seems like the original gatsby-remark-images-grid repository abandoned. No reply from author himself 😟 So I forked the repository. It looks like I’m a maintainer now.

Feel free to use it. Also, I published package on NPM:

npm install --save gatsby-remark-images-grid-v4

Changes:

• Fully compatible with both Gatsby 3.x/4.x.
• All devDependencies updated.
• Gatsby versions in peerDependencies bumped.
• Husky hooks were upgraded to v7.

@hendra-go thank you for your fix!