Use next/image in component library, but throws error in dev mode

[endigo]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14.16.1

What browser are you using?

Brave, Chrome,

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

We created our own components library and published it to the GitLab package registry.
Our Product Cover component is based on next/image. It works fine on a storybook with unoptimized props.

But I can't use <Cover/> component on the NextJS application because of an error.

Error: Invalid src prop (https://cdn.esan.mn/cover/6sd8knfnvus5.jpg) on `next/image`, hostname "cdn.esan.mn" is not configured under images in your `next.config.js`

Here is my component source:

import React from "react";
import Image from "next/image";
import { Box, BoxProps } from "@chakra-ui/react";

export interface CoverProps extends BoxProps {
  src: string;
  previewUrl: string;
  alt: string;
  imageProps?: {
    width: number;
    height: number;
  };
}

export const Cover: React.FC<CoverProps> = ({
  src,
  previewUrl,
  alt,
  borderRadius = "xs",
  imageProps = {
    width: 550,
    height: 825,
  },
  ...otherProps
}) => {
  return (
    <Box
      position="relative"
      boxShadow="0px 8px 18px rgba(17, 17, 17, 0.04)"
      overflow="hidden"
      borderRadius={borderRadius}
      {...otherProps}
    >
      <Image
        {...imageProps}
        layout="responsive"
        src={src}
        alt={alt}
        placeholder="blur"
        blurDataURL={previewUrl}
      />
    </Box>
  );
};

In my application, I installed a component library, use it in ProductList component.

<ContentCard
    alt={content.name}
    previewUrl={previewUrl}
    src={url}
  />

Here is next.config.js:

const nextConfig = {
  poweredByHeader: false,
  target: "serverless",
  webpack5: false,
  images: {
    domains: ["cdn.esan.mn", "image.esan.mn", "cdn.elibrary.mn"],
  },
  ...
}

module.exports = withPlugins(
  [
   ...
  ],
  nextConfig
);

Expected Behavior

TDB

To Reproduce

TDB

[bauschri]

i had the same error on mac os, creating an next.config.js file in root with following content did help.

module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    images: {
      domains: ['images.ctfassets.net'],
    },
  }
  return nextConfig
}

[mmbrtstd]

Having this issue too. Any solutions?
@bauschri solution doesn't work because the library ignores the next config on build

[balazsorban44]

Have you tried adding a next.config.js to your component library at build time with the domain allowed in images.domains?

I guess the problem also can be that the component is trying to find the next.config.js file inside node_modules where you installed the component itself. 🤔

[11koukou]

Have you tried adding a next.config.js to your component library at build time with the domain allowed in images.domains?

I guess the problem also can be that the component is trying to find the next.config.js file inside node_modules where you installed the component itself. 🤔

First of all, thanks for merging my recent pull request recently! (#33290)
I am experiencing the exact issue as this one, I have a component library with Image component included and when I import it to my next application it throws "Un-configured Host" error. That happens only in dev mode, in production works normally. Can't resolve it yet, even if I create a new app with "create-nextx-app".
Also I want to mention that this happens only when I import my library from the npm registry, importing it locally works fine both in dev/ and production. Strange, isn't it?

[11koukou]

Seems that something is happening with my library setup, so probably there is no real issue. I'll try figure it out

[balazsorban44]

Hi, this has been fixed in #33559

It is available starting with 12.0.11-canary.10 and later releases. Please upgrade and test it out! If you still experience an issue, please open a separate bug report with a reproduction. Thanks!

[11koukou]

Hi, this has been fixed in #33559

It is available starting with 12.0.11-canary.10 and later releases. Please upgrade and test it out! If you still experience an issue, please open a separate bug report with a reproduction. Thanks!

Hello,

I forgot to mention that I had solved it, the problem was with my library's bundler configuration since my next app throwed errors about next/router and others as well. I finally managed to get rid of these problems by using next transpile modules package which works its magic with babel configuration and makes a simple react library like mine working with next js.

I would be grateful to hear your opinion about this package. Is it a trustworthy solution or maybe I need to look further down on my library's setup? I am currently using rollup as my library's bundler.
Thanks anyway, looking forward for the next major release!

[balazsorban44]

You should be able to get away without using next-transpile-modules, but you might need to do some research.

One example I immediately found was https://github.com/vercel/turborepo/tree/main/examples/design-system where you can develop your library next to a next.js app for maximum efficiency. You can use any tools you like, but for a shared lib combined with a framework, workspaces are pretty common tools nowadays.

https://classic.yarnpkg.com/lang/en/docs/workspaces/

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.