How can i get access to embedded-asset-block details when i use live preview on contenful site?

Kindly help me with issue below.

When I click the “Open Live Preview” button, I receive an error that says “TypeError: Cannot read properties of undefined (reading ‘file’)”.

I have tried to use the live preview feature, but when I open the live preview on the site, I notice that each entry of rich text with a nodeType “embedded-asset-block” does not include fields, and I cannot get access to file.

Is there a way to include these embedded files when using the live preview on the site?

It is working when i run it locally, however when i use “open live preview” button on site, it does not include detailed information about embedded file. Seems like me it just return id of this embedded entry.

    [BLOCKS.EMBEDDED_ASSET]: (node) => {
      if (
        node.data.target.fields.file.contentType.split('/').includes('image')
      ) {
        return (
          <ContentfulImage
            src={node.data.target.fields.file.url}
            width={1320}
            height={700}
            alt="Some image."
          />
        );
      }

      if (
        node.data.target.fields.file.contentType.split('/').includes('video')
      ) {
        return (
          <div className="inner-container">
            <video controls style={{ width: '500px', height: '500px' }}>
              <source src={node.data.target.fields.file.url} />
            </video>
          </div>
        );
      }

      return <div className="inner-container">EMBEDDED ASSET</div>;
    },
import {
  useContentfulInspectorMode,
  useContentfulLiveUpdates,
} from '@contentful/live-preview/react';

const Post = ({ post, preview }) => {
  const updatedPost = useContentfulLiveUpdates(post);
  const inspectorProps = useContentfulInspectorMode({ entryId: post?.sys.id });
  const router = useRouter();


  if (router.isFallback) {
    return <div>Loading...</div>;
  }

  return (
    <div className="container">
      {preview && (
        <div>
          Preview mode: <Link href="/">exit</Link>
        </div>
      )}
      <h2 {...inspectorProps({ fieldId: 'title' })}>
        {updatedPost.fields.title}
      </h2>
      <p {...inspectorProps({ fieldId: 'description' })}>
        {updatedPost.fields.description}
      </p>
      <time>{post.fields.createdAt}</time>
      <RichText
        {...inspectorProps({ fieldId: 'content' })}
        richTextResponse={updatedPost.fields.content}
      />
    </div>
  );
};

I will appreciate your help. Thank you.

In your target, you don’t have anything