Next.js Discord

Discord Forum

Image component randomly fails

Unanswered
Japanese Bobtail posted this in #help-forum
Open in Discord
Japanese BobtailOP
I am trying to use below client component in server page component. The page randomly fails to load and shows error message in server console with:
Warning: ReactDOM.preload(): Expected two arguments, a non-empty `href` string and an `options` object with an `as` property valid for a `<link rel="preload" as="..." />` tag. The `href` argument encountered was an empty string.
    at ImagePreload (webpack-internal:///(ssr)/./node_modules/next/dist/client/image-component.js:214:11)
    at eval (webpack-internal:///(ssr)/./node_modules/next/dist/client/image-component.js:242:47)
    at div
    at Photo (webpack-internal:///(ssr)/./app/movies/photo.jsx:10:18)


This is what photo.jsx looks:
"use client";
import Image from "next/image";
export function Photo({ src, title, priority }) {
  return (
    <div className="relative aspect-[2/3] w-full overflow-hidden rounded-md bg-muted shadow-md">
      <p>title</p>
      <Image
        src={src}
        alt={title}
        fill
        priority={priority}
        className="object-cover"
      />
    </div>
  );
}

1 Reply

Japanese BobtailOP
the page server component looks like :

import React from "react";
import { Photo } from "../photo";
import { fetchStreamyId } from "./actions";
export default async function MovieDetails({
  params,
}: {
  params: { id: string };
}) {
  const stream = await fetchStreamyId(params.id);

....

<div className="w-full md:w-1/4 mx-auto md:mx-0">
            <Photo
              src={stream?.info.movie_image!}
              title={stream?.info.name}
              priority={true}
            />
          </div>