Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at RenderText (https://i91ddf.csb.app/node_modules/@graphcms/rich-text-react-renderer/dist/rich-text-react-renderer.esm.js:316:23)
    at RenderNode (https://i91ddf.csb.app/node_modules/@graphcms/rich-text-react-renderer/dist/rich-text-react-renderer.esm.js:359:19)
    at RenderElements (https://i91ddf.csb.app/node_modules/@graphcms/rich-text-react-renderer/dist/rich-text-react-renderer.esm.js:445:23)

import { astToHtmlString, Link } from '@graphcms/rich-text-html-renderer'

...
renderers: {
  a: (props) => {
    const condition = true
    return condition
      ? `<a data-condition="special-data">${props.children}</a>`
      : Link(props)
  }
}

TypeError: Cannot assign to read only property 'children' of object '#<Object>'

      {
        "type": "class",
        "children": [
          {
            "type": "code-block",
            "children": [
              {
                "text": "// If we execute the following line in the console...' }"
              }
            ]
          }
        ],
        "className": "language-js"
      }

          <RichText 
            content={post.content.raw}
            renderers={{
              h1: ({ children }) => <h1 className="mx-24 text-3xl font-semibold mb-4">{children}</h1>,
              h2: ({ children }) => <h2 className="mx-24 text-2xl font-semibold mb-4">{children}</h2>,
              h3: ({ children }) => <h3 className="mx-24 text-2xl font-semibold mb-4">{children}</h3>,
              h4: ({ children }) => <h4 className="mx-24 text-2xl font-semibold mb-4">{children}</h4>,
              h5: ({ children }) => <h5 className="mx-24 text-2xl font-semibold mb-4">{children}</h5>,
              bold: ({ children }) => <strong className="mx-24 text-2xl font-semibold mb-4">{children}</strong>,
              link: ({ children, href, rel, title, openInNewTab, id }) => <a className="text-xl text-blue-500 hover-underline">{children}</a>,
              p: ({ children }) => <p className="mx-24 mb-4 text-xl text-left leading-9">{children}</p>,
              code_block: ({ children }) => <code className="mx-24 mb-8 text-sm sm:text-sm inline-flex text-left items-center space-x-4 bg-gray-700 text-gray-200 rounded-md p-8">{children}</code>,
              ul: ({ children }) => <ul className="mx-24 mb-8 text-xl text-left leading-9">{children}</ul>,
              ol: ({ children }) => <ol className="mx-24 text-xl text-left leading-9">{children}</ol>,
              li: ({ children }) => <li className="mx-24 text-xl text-left leading-9">{children}</li>,
              img: ({ children, src, title, height, width }) => <img>{children}</img>,
              table: ({ children }) => <table className="mx-24 mb-1">{children}</table>,
              table_head: ({ children }) => <th className="mx-24 mb-1">{children}</th>,
              table_row: ({ children }) => <tr className="mx-24 mb-1">{children}</tr>,
            }} />

import { NodeRendererType, astToHtmlString } from '@graphcms/rich-text-html-renderer';

renderers: NodeRendererType = {
   img: ({ src }: Partial<any>) => `<img class="my-6 h-[400px] w-full object-left-top object-cover src="${src}" />`,
};

async addContent(post: { content: { raw: { children: any; }; }; }) {
    const content = post.content.raw.children;
    const rendered = await astToHtmlString({ content: content, renderers: this.renderers });

    return { ...post, rendered }
}

src: string;
title: string;
width: number;
height: number;
mimeType: ImageMimeTypes;
altText: string;

<p<iframe ...></p>

node:internal/modules/cjs/loader:1048
  const err = new Error(message);
              ^

Error: Cannot find module './xhr-sync-worker.js'
Require stack:
- /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/chunk-ARIXHL5V.js
- /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/index.js
- /Users/arminunruh/Documents/git/eflux-hygraph-migration/migration.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Function.resolve (node:internal/modules/helpers:136:19)
    at /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/api-VUY5N4BO.js:869:12366
    at /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/chunk-ARIXHL5V.js:3:443
    at /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/api-VUY5N4BO.js:870:20714
    at /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/chunk-ARIXHL5V.js:3:443
    at /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/api-VUY5N4BO.js:876:73493
    at /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/chunk-ARIXHL5V.js:3:443
    at /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/api-VUY5N4BO.js:876:81936
    at /Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/chunk-ARIXHL5V.js:3:443 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/chunk-ARIXHL5V.js',
    '/Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/@graphcms/html-to-slate-ast/dist/index.js',
    '/Users/arminunruh/Documents/git/eflux-hygraph-migration/migration.js'
  ]
}

Node.js v20.9.0

            <RichText
              content={bodyContents}
              renderers={{
                h1: ({ children }) => (
                  <h1 id={children} className={styles.body__h1}>
                    {children}
                  </h1>
                ),
                h2: ({ children }) => (
                  <h2 id={children} className={styles.body__h2}>
                      {children}
                  </h2>
                ),

export interface VideoProps {
    src: string;
    title?: string;
    width?: number;
    height?: number;
    handle?: string;
}

...
          src: 'https://media.graphassets.com/CGcmuQqOSDKd88lYEApe',
          type: 'video',
          title: 'lifetime-membership.mp4',
          width: null,
          handle: 'CGcmuQqOSDKd88lYEApe',
          height: null,
          children: [{ text: '' }],
          mimeType: 'video/mp4',
...

const App = () => {
  return (
    <div>
      <RichText
        children={content}
        renderers={{
          h1: ({ children }) => <h1 className="text-white">{children}</h1>,
          bold: ({ children }) => <strong>{children}</strong>,
        }}
      />
    </div>
  );
};

Failed to compile
src/views/ACoolComponent.jsx
  Line XX:XX:  Do not pass children as props. Instead, nest children between the opening and closing tags  react/no-children-prop

Search for the keywords to learn more about each error.

[
  { type: 'paragraph', children: [ [Object] ] },
  { type: 'paragraph', children: [ [Object], [Object] ] },
  {
    type: 'paragraph',
    children: [ [Object], [Object], [Object], [Object], [Object] ]
  },
  { type: 'paragraph', children: [ [Object], [Object] ] },
  { type: 'paragraph', children: [ [Object], [Object] ] },
  {
    type: 'paragraph',
    children: [ [Object], [Object], [Object], [Object] ]
  },
  { type: 'paragraph', children: [ [Object], [Object] ] },
  { type: 'paragraph', children: [ [Object] ] },
  { type: 'paragraph', children: [ [Object] ] },
  { type: 'paragraph', children: [ [Object], [Object] ] },
  {
    type: 'paragraph',
    children: [ [Object], [Object], [Object], [Object] ]
  },
  { type: 'paragraph', children: [ [Object] ] }
]

ClientError: expected RichText raw value to be object: {"response":{"errors":[{"message":"expected RichText raw value to be object"}],"data":null,"extensions":{"requestId":"clrzz9gimewxb0bldfpixb6ki"},"status":400,"headers":{}},"request":{"query":"mutation MyMutation {\n    upsertAnnouncement(\n        where: { hylexid: \"581215\" }\n        upsert: {\n            create: { \n                hylexid: \"581215\"\n                title: \"Word Script Sign—The Alphabet of Art\"\n                service: \"eflux\"\n                text_html: [object Object]\n                image: \"\"\"{\n  \"thumb\": {\n    \"src\": \"https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,400x400,c\",\n    \"width\": 400,\n    \"height\": 400\n  },\n  \"medium\": {\n    \"src\": \"https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,680\",\n    \"width\": 680,\n    \"height\": 906\n  },\n  \"large\": {\n    \"src\": \"https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,1024\",\n    \"width\": 1024,\n    \"height\": 1365\n  },\n  \"original\": {\n    \"src\": \"https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg?original\",\n    \"width\": 3456,\n    \"height\": 4608\n  }\n}\"\"\"\n                slug: \"word-script-sign-the-alphabet-of-art\"\n                date: \"2024-01-30\"\n            }\n            update: {\n                title: \"Word Script Sign—The Alphabet of Art\"\n                service: \"eflux\"\n                text_html: [object Object]\n                image: \"\"\"{\n  \"thumb\": {\n    \"src\": \"https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,400x400,c\",\n    \"width\": 400,\n    \"height\": 400\n  },\n  \"medium\": {\n    \"src\": \"https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,680\",\n    \"width\": 680,\n    \"height\": 906\n  },\n  \"large\": {\n    \"src\": \"https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,1024\",\n    \"width\": 1024,\n    \"height\": 1365\n  },\n  \"original\": {\n    \"src\": \"https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg?original\",\n    \"width\": 3456,\n    \"height\": 4608\n  }\n}\"\"\"\n                slug: \"word-script-sign-the-alphabet-of-art\"\n                date: \"2024-01-30\"\n            }\n        }\n      ) {\n        id\n    }\n  }"}}
    at makeRequest (/Users/arminunruh/Documents/git/eflux-hygraph-migration/node_modules/graphql-request/build/cjs/index.js:310:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  response: {
    errors: [ { message: 'expected RichText raw value to be object' } ],
    data: null,
    extensions: { requestId: 'clrzz9gimewxb0bldfpixb6ki' },
    status: 400,
    headers: Headers {
      [Symbol(map)]: [Object: null prototype] {
        date: [ 'Tue, 30 Jan 2024 06:28:33 GMT' ],
        'content-type': [ 'application/json' ],
        'content-length': [ '134' ],
        connection: [ 'keep-alive' ],
        'cf-ray': [ '84d7a7ca7e37727c-HAM' ],
        'cf-cache-status': [ 'DYNAMIC' ],
        'cache-control': [ 'private, no-store' ],
        vary: [ 'Origin, Accept-Encoding' ],
        'x-cdn-cache-status': [
          'optimize,skip-no-query-op,disable-cdn-not-cacheable,disable-cdn,no-transform-is-mutation,fetch-origin,reject-not-ok,update-project'
        ],
        'x-request-id': [ 'clrzz9gimewxb0bldfpixb6ki' ],
        'report-to': [
          '{"endpoints":[{"url":"https:\\/\\/a.nel.cloudflare.com\\/report\\/v3?s=zvTpVM0sOeWEqBHNoy8fJSTbyvhyDhqftWa%2BvJ6lALJNWKeC%2BelelG34c6sX5fLvF6wqdQmtzhE%2FJP2c0t7rykvTmLHuoDSt9CIIrYsZGTj7PI2qUfxbzl8W9FLg439VTwmW2I7Xp0xwEfyRHHWtj7YHlsscoJW8b1saGTg0uuw090F3J8hB"}],"group":"cf-nel","max_age":604800}'
        ],
        nel: [
          '{"success_fraction":0,"report_to":"cf-nel","max_age":604800}'
        ],
        server: [ 'cloudflare' ]
      }
    }
  },
  request: {
    query: 'mutation MyMutation {\n' +
      '    upsertAnnouncement(\n' +
      '        where: { hylexid: "581215" }\n' +
      '        upsert: {\n' +
      '            create: { \n' +
      '                hylexid: "581215"\n' +
      '                title: "Word Script Sign—The Alphabet of Art"\n' +
      '                service: "eflux"\n' +
      '                text_html: [object Object]\n' +
      '                image: """{\n' +
      '  "thumb": {\n' +
      '    "src": "https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,400x400,c",\n' +
      '    "width": 400,\n' +
      '    "height": 400\n' +
      '  },\n' +
      '  "medium": {\n' +
      '    "src": "https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,680",\n' +
      '    "width": 680,\n' +
      '    "height": 906\n' +
      '  },\n' +
      '  "large": {\n' +
      '    "src": "https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,1024",\n' +
      '    "width": 1024,\n' +
      '    "height": 1365\n' +
      '  },\n' +
      '  "original": {\n' +
      '    "src": "https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg?original",\n' +
      '    "width": 3456,\n' +
      '    "height": 4608\n' +
      '  }\n' +
      '}"""\n' +
      '                slug: "word-script-sign-the-alphabet-of-art"\n' +
      '                date: "2024-01-30"\n' +
      '            }\n' +
      '            update: {\n' +
      '                title: "Word Script Sign—The Alphabet of Art"\n' +
      '                service: "eflux"\n' +
      '                text_html: [object Object]\n' +
      '                image: """{\n' +
      '  "thumb": {\n' +
      '    "src": "https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,400x400,c",\n' +
      '    "width": 400,\n' +
      '    "height": 400\n' +
      '  },\n' +
      '  "medium": {\n' +
      '    "src": "https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,680",\n' +
      '    "width": 680,\n' +
      '    "height": 906\n' +
      '  },\n' +
      '  "large": {\n' +
      '    "src": "https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg,1024",\n' +
      '    "width": 1024,\n' +
      '    "height": 1365\n' +
      '  },\n' +
      '  "original": {\n' +
      '    "src": "https://images.e-flux-systems.com/581215_0e60b22986a89d2e23433b61e8d1a6bc.jpg?original",\n' +
      '    "width": 3456,\n' +
      '    "height": 4608\n' +
      '  }\n' +
      '}"""\n' +
      '                slug: "word-script-sign-the-alphabet-of-art"\n' +
      '                date: "2024-01-30"\n' +
      '            }\n' +
      '        }\n' +
      '      ) {\n' +
      '        id\n' +
      '    }\n' +
      '  }',
    variables: undefined
  }
}

{
    "raw": {
      "children": [
        {
          "type": "paragraph",
          "children": [
            {
              "text": "This is example of text entry. It has image.\n⁠\n⁠"
            },
            {
              "href": "blob:https://app.hygraph.com/xx",
              "type": "link",
              "title": "(Image)",
              "children": [
                {
                  "text": "blob:https://app.hygraph.com/xx"
                }
              ],
              "openInNewTab": true
            },
            {
              "text": ""
            }
          ]
        }
      ]
    }
}

{
  "children": [
    {
      "type": "paragraph",
      "children": [
        {
          "text": "Lorem ipsum dolor sit amet, "
        },
        {
          "type": "link",
          "href": "https://google.com",
          "children": [
            {
              "text": "consectetur "
            }
          ]
        },
        {
          "text": "adipiscing elit, sed do ..."
        }
      ]
    }
  ]
}

{"type": "heading-two",
    {
        {
            "children": [
                {
                    "children": [
                        "text": ""
                    ]
                }
            ]
        }
    }
}

# required peer-dependancies
npm install [email protected] [email protected]
npm install @graphcms/html-to-slate-ast

Severity: critical
Prototype Pollution in immer - https://github.com/advisories/GHSA-c36v-fmgq-m8hx
Prototype Pollution in immer - https://github.com/advisories/GHSA-33f9-j839-rf8h
fix available via `npm audit fix --force`
Will install [email protected], which is a breaking change
node_modules/immer
  slate  0.50.0 - 0.66.0-2021725134429 || >=1.0.0-2021312830
  Depends on vulnerable versions of immer
  node_modules/slate