Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

rich text contentful target.fields undefined when using embedded-asset-block -Gatsby

See original GitHub issue

Issue

Cannot read property ‘title’ of undefined. When trying to render the images inside a contentful rich text.

When I check the raw data in graphql fields key is missing inside ‘embedded-asset-block’.target

##graphql

code

 const options = {
    renderNode: {
      "embedded-asset-block": (node) => {
        const alt = node.data.target.fields.title["en-US"];
        const url = node.data.target.fields.file["en-US"].url;
        return <img alt={alt} src={url} />;
      },
    },
  };

  return (
    <Layout>
      <Head title={props.data.contentfulBlogPost.title} />
      <h1>{props.data.contentfulBlogPost.title}</h1>
      <p>{props.data.contentfulBlogPost.publishedDate}</p>
      {documentToReactComponents(
        JSON.parse(props.data.contentfulBlogPost.body.raw),
        options
      )}
    </Layout>
  );

please help me to resolve this issue. I recently upgraded all the gatsby and gatsby plugins. So how can I embedd the images and videos in the rich text.

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:5

Top GitHub Comments

2reactions

Prichmondocommented, Apr 15, 2021

I have the same issue after updating gatsby-source-contentful to the latest version. It looks like the embedded resources don’t have the fileds prop anymore. I found that the fields are now flattered into the target object itself.

I don’t know the reason of this breaking change, maybe I am doing something wrong, but I have the feeling that the documentation about the new version of gatsby-source-contentful is very unclear.

1reaction

DanweDEcommented, May 5, 2021

Have you gone through the change log when upgrading to the new major version? This entry could be of interest to you.

For documentation on renderRichText() please see documentation on rich-text-react-renderer which is also applicable to gatsby-source-contentful/rich-text as stated in this Contentful / Gatsby guide or in the above change-log entry code example.

Top Results From Across the Web

Embedded images are ignored · Issue #61 · contentful/rich-text

It seems there are different fields if you're not using Gatsby's package. So rather than data.target.fields, you need to look for the links ......

Gatsby With Contentful Rich Text Images Not Displaying

Contentful Rich Text JSON, as you can see it detects that there are two images but it cannot see the file sources; the...

Rendering linked assets and entries in the Rich Text field

The power of the Contentful Rich Text field is that it offers a WYSIWYG ... and nodeType: "embedded-asset-block" — with empty content nodes....

No fields in node.data.target when trying to render embedded ...

The README.md shows the way to render rich text as the following: const options = { renderNode: { [BLOCKS.

gatsby-source-contentful

Displaying responsive image with gatsby-plugin-image ... Contentful Rich Text ... When using reference fields, be aware that this source plugin will ...