StructuredText renderLinkToRecord problem: Multiple children were passed to <Link> with `href`

🆘 Support
1

Describe the issue:

Not sure if the right place to ask but I will try anyway. I have a different behaviour in two of my projects with structure text React component when passing renderLinkToRecord. Both projects use the same code:

<StructuredText
   data={data.content}
   renderLinkToRecord={({ record, children }) => <RenderLinkToRecord record={record} children={children} />}
/>

And the same RenderLinkToRecord component:

export const RenderLinkToRecord = ({ record, children }) => {
  return (
    <NextLink href={`${record.slug}`} title={record.title}>
      {children}
    </NextLink>
  );
}

Both projects receive the same children data into the RenderLinkToRecord component:

Project 1

[
  {
    '$$typeof': Symbol(react.element),
    type: Symbol(react.fragment),
    key: 't-0',
    ref: null,
    props: { children: [Array] },
    _owner: null,
    _store: {}
  }
]

Project 2

[
  {
    '$$typeof': Symbol(react.element),
    type: Symbol(react.fragment),
    key: 't-0',
    ref: null,
    props: { children: [Array] },
    _owner: null,
    _store: {}
  }
]

But in the project 1 I receive “Error: Multiple children were passed to with href of sirius but only one child is supported Multiple children were passed to `<Link>` | Next.js”, while in the project two this works as expected!

I am busting my head regarding this for the couple of hours, but I just don’t see what would be different. The only thing I see different is that project one is using Nextjs ^13.4.19 and project 2 is using ^13.4.12. But this should not have any influence, am I right?

Anyone sees what could be the problem here?

Kind regards,
Primoz

2

@primoz.rome,

Without seeing the exact models/projects in question, my best guess is that their schemas might be a little different? Can you console.log (or use a debugger) to examine API responses you get for those two projects?

I’m not sure what the “project 1” and “project 2” snippets are… they don’t look like our normal CDA or CMA responses. Are they being piped into some data store (Redux, etc.), and if so, are they getting loaded in there right?

I doubt that the Next.js patch version should matter (especially if they’re both on the ^ semver), but you can always make it explicit for testing if you want (make both 14.4.12 with no ^ caret symbol and then npm i again).

I’d also be happy to dive into this more specifically if you can please share the relevant queries /projects with me, and maybe the frontend code too so I can better understanding how those components are receiving the data from our API? You can either PM me here or email us at support@datocms.com.

If you need to share a repo with me on Github, you can use r.tuan@datocms.com.

Thank you!

1 Like
3

In both cases I use structural text field and fetching links to other DatoCMS records via GraphQL query. Query used for is something like this in both cases… We add

...
        ... on HighlightBlogPostSectionRecord {
                id
                content {
                  value
                  blocks {...}
                  links {
                    __typename
                    ... on ProductHomepageRecord {
                      id
                      slug
                      title
                    }
                    ... on ProductRecord {
                      id
                      slug
                      title
                      subtitle
                    }
                    ... on ProductCategoryRecord {
                      id
                      slug
                      name
                    }
                    ... on SolutionHomepageRecord {
                      id
                      slug
                      title
                    }
                    ... on SolutionRecord {
                      id
                      slug
                      title
                      subtitle
                    }
                    ... on SolutionCategoryRecord {
                      id
                      slug
                    }
                    ... on BlogPostRecord {
                      id
                      slug
                      title
                    }
                  }
                }
              }
...