Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[NEXT-793] Turbopack ignores images.remotePatterns config option #46758

Closed
1 task done
phil-bl opened this issue Mar 4, 2023 · 1 comment · Fixed by #47721
Closed
1 task done

[NEXT-793] Turbopack ignores images.remotePatterns config option #46758

phil-bl opened this issue Mar 4, 2023 · 1 comment · Fixed by #47721
Labels
bug Issue was opened via the bug report template. Image (next/image) Related to Next.js Image Optimization. Turbopack Related to Turbopack with Next.js.

Comments

@phil-bl
Copy link

phil-bl commented Mar 4, 2023 •
edited by balazsorban44

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:42:11 PST 2023; root:xnu-8792.81.3~2/RELEASE_X86_64
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.2.3-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

Image optimization (next/image, next/legacy/image), Turbopack (--turbo)

Link to the code that reproduces this issue

https://github.com/philipsavkin/remote-patterns-tp

To Reproduce

Run the example repo using yarn dev, open http://localhot:3000 - the error will pop up. Uncommenting the domains: ['res.cloudinary.com'], line in the next.config.js fixes the problem

Error message:

error - [rendering] [root of the server]/  Error during SSR Rendering
  Error: Invalid src prop (https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg) on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`
  See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
    at defaultLoader (node_modules/next/dist/shared/lib/image-loader.js:35:27)
    at <unknown> (node_modules/next/dist/client/image.js:96:39)
    at <anonymous>
    at generateImgAttrs (node_modules/next/dist/client/image.js:96:24)
    at <unknown> (node_modules/next/dist/client/image.js:584:27)
    at renderWithHooks (node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)

Describe the Bug

Turbopack build ignores images.remotePatterns option, though the legacy images.domains option works.
next.config.js:

/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
  images: {
    // domains: ['res.cloudinary.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: '/**',
      },
    ],
  },
}

Expected Behavior

images.remotePatterns should be enough

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

NEXT-793
@phil-bl phil-bl added the bug Issue was opened via the bug report template. label Mar 4, 2023
@balazsorban44 balazsorban44 added Image (next/image) Related to Next.js Image Optimization. Turbopack Related to Turbopack with Next.js. type: needs investigation labels Mar 6, 2023
@balazsorban44 balazsorban44 changed the title Turbopack ignores images.remotePatterns config option [NEXT-793] Turbopack ignores images.remotePatterns config option Mar 7, 2023
jridgewell added a commit that referenced this issue Mar 30, 2023
@jridgewell
Turbopack: Fix images.remotePatterns port/protocol serialization
a31caa7 
By default, `serde-json` will transform a `None` into a `null` value, and Next's [default image loader][loader] will perform strict `=== undefined` [equality checks][checks] on the fields. Because `null !== undefined`, a missing `protocol` or `port` will always be checked, and `null` will never match either.

Fixes #46758
Fixes vercel/turbo#4347
Fixes WEB-770
Fixes NEXT-793

[loader]: https://github.com/vercel/next.js/blob/35cf930572f70fb7f64bbccce833584c14b9da0c/packages/next/src/shared/lib/image-loader.ts#L50
[checks]: https://github.com/vercel/next.js/blob/35cf930572f70fb7f64bbccce833584c14b9da0c/packages/next/src/shared/lib/match-remote-pattern.ts#L5
jridgewell added a commit that referenced this issue Mar 30, 2023
@jridgewell
Turbopack: Fix images.remotePatterns port/protocol serialization
7dd8f85 
By default, `serde-json` will transform a `None` into a `null` value, and Next's [default image loader][loader] will perform strict `=== undefined` [equality checks][checks] on the fields. Because `null !== undefined`, a missing `protocol` or `port` will always be checked, and `null` will never match either.

Fixes #46758
Fixes vercel/turbo#4347
Fixes WEB-770
Fixes NEXT-793

[loader]: https://github.com/vercel/next.js/blob/35cf930572f70fb7f64bbccce833584c14b9da0c/packages/next/src/shared/lib/image-loader.ts#L50
[checks]: https://github.com/vercel/next.js/blob/35cf930572f70fb7f64bbccce833584c14b9da0c/packages/next/src/shared/lib/match-remote-pattern.ts#L5
@jridgewell jridgewell mentioned this issue Mar 30, 2023
Merged
@kodiakhq kodiakhq bot closed this as completed in #47721 Mar 31, 2023
kodiakhq bot pushed a commit that referenced this issue Mar 31, 2023
@jridgewell
Turbopack: Fix images.remotePatterns port/protocol serialization (#47721
43872c7 
)

By default, `serde-json` will transform a `None` into a `null` value, and Next's [default image loader][loader] will perform strict `=== undefined` [equality checks][checks] on the fields. Because `null !== undefined`, a missing `protocol` or `port` will always be checked, and `null` will never match either.

Fixes #46758
Fixes vercel/turbo#4347
Fixes WEB-770
fix NEXT-793 ([link](https://linear.app/vercel/issue/NEXT-793))

[loader]: https://github.com/vercel/next.js/blob/35cf930572f70fb7f64bbccce833584c14b9da0c/packages/next/src/shared/lib/image-loader.ts#L50
[checks]: https://github.com/vercel/next.js/blob/35cf930572f70fb7f64bbccce833584c14b9da0c/packages/next/src/shared/lib/match-remote-pattern.ts#L5
@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Image (next/image) Related to Next.js Image Optimization. Turbopack Related to Turbopack with Next.js.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Turbopack: Fix images.remotePatterns port/protocol serialization vercel/next.js
2 participants
@balazsorban44 @phil-bl