🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Issue with serializers in 11TY + Sanity integration

17 replies
Last updated: Sep 21, 2021
Hello everyone,
I'm still battling with 11TY + Sanity and serializers.

I have an 11ty filter that is working with my serializers.

However, I can't make the serializer for my custom block type "infoText" work:


//from utils/serializers.js


const { h } = require("@sanity/block-content-to-html");


// Learn more on <https://www.sanity.io/docs/guides/introduction-to-portable-text>

module.exports = {
  
types: {
      
cta: ({ node }) => {

        _return_ h(
          
'a',
          
{
            
className:
              
'bg-yellow-500 text-white',
            
href: node.ctaUrl,
          
},
          
node.ctaText,
        
)
      
},
      
infoText: ({ node }) => {

        _return_ h(
          
'p',
          
{
            
className:
              
'bg-blue-500 text-white',
          
},
          
node.bodyInfo.children,
        
)
      
},
    
},
  
}

The node.bodyInfo.children does not work, nor any of the combinations I've tried. My post's data structure is as follows:


{
  "_createdAt": "2021-09-14T11:25:05Z",
  "_id": "89ff5403-326b-4db1-8752-04ea1c85f114",
  "_rev": "7dkOKJtWoyCn0kHUhHzZu7",
  "_type": "post",
  "_updatedAt": "2021-09-20T06:38:14Z",
  "body": [
    {
      "_key": "f84e932860bf",
      "_type": "block",
      "children": [
        {
          "_key": "bd29bce1dda1",
          "_type": "span",
          "marks": [],
          "text": ""
        }
      ],
      "markDefs": [
        {
          "_key": "38aa715c6214",
          "_type": "link",
          "href": "<https://www.fundacionrcoms.com/anti-edad/metodos-eliminar-arrugas/>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "bf5d17f3da91",
      "_type": "cta",
      "ctaText": "test",
      "ctaUrl": "<https://www.fundacionrcoms.com/>"
    },
    {
      "_key": "595873ddfc54",
      "_type": "block",
      "children": [
        {
          "_key": "ba794ddbef68",
          "_type": "span",
          "marks": [],
          "text": ""
        }
      ],
      "markDefs": [
        {
          "_key": "38aa715c6214",
          "_type": "link",
          "href": "<https://www.fundacionrcoms.com/anti-edad/metodos-eliminar-arrugas/>"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "8acb94638c0c",
      "_type": "infoText",
      "bodyInfo": [
        {
          "_key": "6b6e533e67fd",
          "_type": "block",
          "children": [
            {
              "_key": "3593ad3abdf9",
              "_type": "span",
              "marks": [],
              "text": "test test info"
            }
          ],
          "markDefs": [],
          "style": "normal"
        }
      ]
    },
    .....etc
Any tips? There's not much info on this.
Sep 20, 2021, 8:19 AM
Hey Batz! Just to double check, in the example you shared above, does your cta serializer work or are they both broken?
Sep 20, 2021, 4:36 PM
Hi
user M
, the "cta" serializer works as intended, no problem!
At this point I've tried refactoring to this (to see if the problem was that not all Posts have that block), but it also doesn't work (it builds but I don't know if it makes any sense):


infoText: ({ node }) => {

        
const { content = '' } = node.bodyInfo


        _if_ (content !== undefined) {

          _return_ h(
            
'p',
            
{
              
className:
                
'bg-blue-500 text-white',
            
},

            
node.bodyInfo
          
)

          
          
}


          _return_ blocksToHtml.defaultSerializers.types.infoText(node)
      
},

To be more clear, I either get no errors, or "undefined". It builds and the source code displays the


<p class="bg-blue-500 text-white"></p>

...but no content
Sep 20, 2021, 4:38 PM
Got it. I'll spin up an 11ty build and see if I can troubleshoot.
Sep 20, 2021, 4:53 PM
Got it. I'll spin up an 11ty build and see if I can troubleshoot.
Sep 20, 2021, 4:53 PM
Let me make a public repo of it to save you some time, just a sec
Sep 20, 2021, 4:54 PM
Got it. I'll spin up an 11ty build and see if I can troubleshoot.
Sep 20, 2021, 4:53 PM
Sep 20, 2021, 4:58 PM
Thanks!
Sep 20, 2021, 4:59 PM
Thank you for your help, this bit has me anxious! 😅
Sep 20, 2021, 5:00 PM
No problem, serializers can be a beast sometimes!
Sep 20, 2021, 5:01 PM
Hello, the issue has been solved!
It was a problem of me not getting the structured content "architecture".

Once you use


node.bodyInfo.map(({children}) => children.map(child => child.text)).flat().join(''),

It works without a hitch
Sep 21, 2021, 5:23 AM
Hello, the issue has been solved!
It was a problem of me not getting the structured content "architecture".

Once you use


node.bodyInfo.map(({children}) => children.map(child => child.text)).flat().join(''),
Sep 21, 2021, 5:23 AM
However, is there any info on how to make nested HTML elements inside a serializer? I can't find any examples.
user M
Sep 21, 2021, 9:42 AM
To be clear, this is my serializer now:

prosAndCons: ({ node }) =>{


        _return_ h(
          
'ul',
          
{
            
className: 'bg-blue-500 text-white',
          
},
          
node.cons.map( children => '<li>' + children + '</li>'),
        
)
      
},

It outputs:

&lt;li&gt;value1&lt;/li&gt;&lt;li&gt;value2&lt;/li&gt;

And I'm not capable of making it render those &lt;li&gt; tags.

The approach seen here also does not work:


https://katiekodes.com/sanity-11ty-datatable-serializer/
Sep 21, 2021, 11:21 AM
Regarding nested elements, I think reading through the documentation for the Hyperscript repo here could show you some useful examples.
Sep 21, 2021, 2:34 PM
Thanks! I hadn't found that, I'll take a look!
Sep 21, 2021, 6:30 PM
We should probably link to it in our documentation! I'll add it in.
Sep 21, 2021, 6:49 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?