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.