Cannot read properties of undefined (reading 'children')

[itsmicaio]

I'm trying to install this plugin in my blog, but I am getting this error:

 ERROR #11321  API.NODE.EXECUTION

"gatsby-plugin-satorare" threw an error while running the onPostBootstrap lifecycle:

Cannot read properties of undefined (reading 'children')



  TypeError: Cannot read properties of undefined (reading 'children')
  
  - preprocess.ts:175 walk
    [my-web-page]/[satori]/src/handler/preprocess.ts:175:31
  
  - preprocess.ts:177 walk
    [my-web-page]/[satori]/src/handler/preprocess.ts:177:9
  
  - preprocess.ts:176 
    [my-web-page]/[satori]/src/handler/preprocess.ts:176:41
  
  - bridge.js:485 VM2 Wrapper.apply
    [my-web-page]/[vm2]/lib/bridge.js:485:11
  
  - Array.map
  
  - bridge.js:485 VM2 Wrapper.apply
    [my-web-page]/[vm2]/lib/bridge.js:485:11
  
  - preprocess.ts:176 walk
    [my-web-page]/[satori]/src/handler/preprocess.ts:176:30
  
  - preprocess.ts:180 preProcessNode
    [my-web-page]/[satori]/src/handler/preprocess.ts:180:3
  
  - satori.ts:93 xl
    [my-web-page]/[satori]/src/satori.ts:93:9

gatsby-config.ts

import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
  siteMetadata: {
    title: `My Web Page`,
    siteUrl: `https://caiofuzatto.com.br`,
  },
  graphqlTypegen: true,
  plugins: [
    //[......]
    {
      resolve: `gatsby-plugin-satorare`,
      options: {
        path: `${__dirname}/src/templates/thumbnail.tsx`,
        width: 1200,
        height: 630,
        target_nodes: ['Mdx']
      }
    }
  ],
};

export default config;

/src/templates/thumbnail.tsx

import React from "react";
import { Node } from "gatsby";

export default function(node: Node) {
  if (node.internal.type === 'Mdx') {
    const { title, date } = node.frontmatter as any;
    return (
      <div className="w-full h-screen bg-green p-4 pt-16 pr-16">
        <h1 className="text-white font-bold text-8xl h-96">{title}</h1>
        <span className="text-white text-xl">{date}</span>
      </div>
    );
  } else {
    return <div>IMG</div>
  }
};

What am i doing wrong?

[okaryo]

Thanks for the issue.

I'll look into it over the weekend, just a little more time please. 🙏

[okaryo]

@itsmicaio
I checked the demo page at https://og-playground.vercel.app/ and it seems the root div element needs style={{display: 'flex'}}. Can you add this and try building again?

example:

<div
  style={{ display: 'flex' }}
  className="w-full h-screen bg-green p-4 pt-16 pr-16"
>
  <h1 className="text-white font-bold text-8xl h-96">{title}</h1>
  <span className="text-white text-xl">{date}</span>
</div>

[itsmicaio]

@okaryo
it didn't work :(

[okaryo]

@itsmicaio
Did you also encounter issues when trying this on the playground at https://og-playground.vercel.app/? Any additional details you can provide would be really helpful.

[itsmicaio]

Hi @okaryo,

I didn't find any issue at og playground. So i open this PR at my public project where i got this error. Could you see the diff please?
I try to run this on Macbook Air M1 and I don't know if this is the problem.