LinkPreview Error: You need to provide url in props to render the component Error Component Stack

[pooja-itechnolabs]

Hello @ashwamegh ,

I am encountering issues while using the LinkPreview plugin in my React application. While the plugin works as expected for certain URLs, it intermittently throws errors for others. Additionally, some URLs that previously worked suddenly return errors, and the response time for fetching previews is notably long.

I have integrated the plugin as follows:
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Loading from "./CreatePost/Loading";
import LinkPreview from '@ashwamegh/react-link-preview'

function LinkPreviewComp({ closed, ...props }) {

const [url, setUrl] = useState("https://www.facebook.com/friends");

useEffect(() => {
    const extensionParams = JSON.parse(localStorage.getItem("extensionParams"));
    if (extensionParams && extensionParams.length > 0) {
        const lastParam = extensionParams[extensionParams.length - 1];
        console.log(lastParam.url, "lastParam.url")
        if (lastParam && lastParam.url) {
            // setUrl(lastParam.url);
        }
    }
}, []);

function LinkPreviewComponent({ loading, preview }) {
    console.log(preview, 'preview');
    const { domain = "Unknown Domain", title = "No Title", description = "No Description", img } = preview || {};
    // setImageSrc(img)
    return loading ? (
        <Loading />
    ) : (
        <div>
            <p>Domain: {domain}</p>
            <p>Title: {title}</p>
            <p>Description: {description}</p>
            <div style={{ position: "relative", width: "150px", height: "150px" }}>
                {img && (
                    <>
                        <img
                            src={img}
                            alt={title || "Image preview"}
                            style={{
                                width: "100%",
                                height: "100%",
                                objectFit: "cover",
                                cursor: "pointer",
                            }}
                            onClick={() => document.getElementById("file-input").click()}
                        />
                        <input
                            type="file"
                            accept="image/*"
                            id="file-input"
                            style={{ display: "none" }}
                        // onChange={handlePost}
                        />
                    </>
                )}
            </div>
        </div>
    );
}

return (
    <div >

        <LinkPreview
            url={url}  // Ensure url is passed correctly
            customDomain="https://lpdg-server.azurewebsites.net/parse/link"
            render={LinkPreviewComponent}
        />

    </div>
);

}

export default React.memo(LinkPreviewComp);``
Despite this, I am experiencing the following issues:

1. Inconsistent behavior: Some URLs that worked previously now result in errors.
2. Long response times: The fetching of link previews often takes an extended period, leading to delays in displaying content.
3. Error Responses: Occasionally, the plugin fails to retrieve the preview, even for valid URLs.

example URL's that are not working:

https://yopmail.com/wm

https://www.facebook.com/friends

[ashwamegh]

Hi @pooja-itechnolabs can you tell me what is the react version you are using in the project?

[paragdulam]

@ashwamegh Facing the same issue. I am on react 18.3.1