Invalid src prop hostname is not configured under images in your next.config.js

[tar-aldev]

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

14.15.5

What browser are you using?

Chrome

What operating system are you using?

linux

How are you deploying your application?

Vercel

Describe the Bug

I am trying to add the image from unsplash with the following url:

https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=714&q=80

I am getting an error

Invalid src prop (https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=714&q=80) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

So I updated my next.config.js to the following:

module.exports = {
  images: {
    domains: ['images.unsplash.com'],
  },
};

But I still see this error. This is very unclear why it is happening. Am I doing something wrong?
UPDATE:
It happens only in storybook, and does not happen in plain app.
Any suggestions that can help?

If I save the image locally, to stories/assets/image.jpg

And then import it as

import img from './assets/image.jpeg';

It still does not work, this time I am getting another error

Failed to parse src "static/media/stories/assets/photo-1565299624946-b28f40a0ae38.jpeg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

I went further and tried to use

@next/plugin-storybook

which again gave me the error

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[11].issuer should be one of these:
ERR!    RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
ERR!    -> One or multiple rule conditions
ERR!    Details:
ERR!     * configuration.module.rules[11].issuer.not should be an array:
ERR!       [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
ERR!     * configuration.module.rules[11].issuer.not should be one of these:
ERR!       [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
ERR!       -> Logical NOT
ERR!  - configuration.resolve.alias['/home/t-zander/projects/pet/next-js/pizza-app/node_modules/next/dist/next-server/lib/router/utils/resolve-rewrites.js'] should be a string.
ERR!    -> New request
ERR!     at Object.webpack [as get] (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
ERR!     at async buildDevStandalone (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async buildDev (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
ERR!  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[11].issuer should be one of these:
ERR!    RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
ERR!    -> One or multiple rule conditions
ERR!    Details:
ERR!     * configuration.module.rules[11].issuer.not should be an array:
ERR!       [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
ERR!     * configuration.module.rules[11].issuer.not should be one of these:
ERR!       [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]
ERR!       -> Logical NOT
ERR!  - configuration.resolve.alias['/home/t-zander/projects/pet/next-js/pizza-app/node_modules/next/dist/next-server/lib/router/utils/resolve-rewrites.js'] should be a string.
ERR!    -> New request
ERR!     at Object.webpack [as get] (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/webpack/lib/webpack.js:31:9)
ERR!     at Object.start (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:92:27)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/@storybook/core-server/dist/cjs/dev-server.js:103:28)
ERR!     at async buildDevStandalone (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async buildDev (/home/t-zander/projects/pet/next-js/pizza-app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)

Using images has never been so hard....

Are there any guides about this? As it is really unclear, an despite a lot of workarounds it would be good to have a clear solution.

Expected Behavior

Image should be loaded when domains array is specified and contains the domain for the image.

To Reproduce

Create next app
use the above image
Use component

<Image
      src={product.imageSrc}
      alt={`${product.name} pizza`}
      layout="fill"
/>

[chenrui333]

Still seeing this issue with the latest 11.0.2-canary.16 release

[ijjk]

Hi, this appears to be related to #18393 so I'm going to close this in favor of that one.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.