MarkdownRenderer Image Type Error Fix

[ranilmukesh]

No description provided.

[ranilmukesh]

MarkdownRenderer Image Type Error Fix

Errors Encountered

1. Type Error for src Prop in Img Component

   • Error: Type 'string | Blob' is not assignable to type 'string | StaticImport'.
   • Cause: The next/image component expects the src prop to be a string or StaticImport, but the code was passing a value that could be a Blob.

2. UMD Global Reference Error

   • Error: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.
   • Cause: The code used React.useEffect without importing useEffect from React as a named import.

How We Fixed Them

1. Handling Blob Type for Image src

• Updated the Img component to check if src is a Blob.
• If src is a Blob, we convert it to an object URL using URL.createObjectURL(src) and pass that to the Image component.
• If src is a string, we use it directly.
• This ensures compatibility with next/image and resolves the type error.

2. Importing useEffect Correctly

• Added useEffect to the React import statement:

  import { FC, useState, useEffect } from 'react'

• Replaced React.useEffect with just useEffect in the code.
• This resolves the UMD global reference error and follows best practices for React hooks in modules.

---

File updated: src/components/ui/typography/MarkdownRenderer/styles.tsx

Status: All errors fixed and code is now type-safe and compliant with React module standards.