Nextjs failing to load normal images from cloudinary without priority flag

[ajmeraaxesh]

Verify canary release

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

Provide environment information

next.config.js
swcMinify: true,
images: {
domains: ['images.unsplash.com', 'tailwindui.com', 'res.cloudinary.com'],
loader: 'cloudinary',
path: 'https://res.cloudinary.com/dtkvfdjg5/image/upload',
},

What browser are you using? (if relevant)

All browsers

How are you deploying your application? (if relevant)

No response

Describe the Bug

My app uses cloudinary images as CDN and I use next/image for image optimization. It seems like that next.image is having some issue when being deployed on verbal.

I tested it locally and it loads fine. But when deployed to vercel, these images are not even loading.

The workaround I did was added a "Priority" tag to Next/Image component and it started loading image again.

I am not sure if its a bug in vernal or in Image being laded. Please see attached scrrenshot

Vercel Deployment with No Priority Image Attribute
https://devang-v3-k8ofsz699-ajmeraaxesh.vercel.app

Vercel Deployment with Priority Image Attribute:
https://devang-v3-o965x7vqc-ajmeraaxesh.vercel.app

If you compare the brand logo images, the only issue you will see is the priority flag see in the Working version

Expected Behavior

Vercel Deployment with Priority Image Attribute:
https://devang-v3-o965x7vqc-ajmeraaxesh.vercel.app

Priority Images should only be used in the above the fold content, not for all images to not performance score

To Reproduce

Vercel Deployment with No Priority Image Attribute
https://devang-v3-k8ofsz699-ajmeraaxesh.vercel.app

[ajmeraaxesh]

I figured the issue, with respect to my site. Its an issue with SWC minifier, the minifier is generating the same variable,
thereby preventing loading of images, as shown in the links above

Solution: Removed swcMinify: true in next.config.js

[balazsorban44]

Interesting, but I actually see the same error thrown in your working example. 🤔

So while the SWC modification error should be handled, it might not be relevant for this issue. (You might want to narrow it down and open a separate bug report with an attached reproduction so we can have a look)

[balazsorban44]

I am trying to reproduce this locally, but I am not able to do so.

You also have an image above the fold which seems to load fine. It's unclear if that image always uses priority or not.

One thing I notice is that the images not showing up are all .svg. Is this correct?

Could you share your code so I can investigate further? 🙏

Here is my reproduction:

https://github.com/balazsorban44/nextjs-35917

https://balazsorban-35917.vercel.app

[ajmeraaxesh]

@balazsorban44 thanks for replying. I am wrong about the image "priority" flag being an issue.
It is definitely the SWC minify flag which is preventing images from getting loaded.

If I remove "swcMinify: true" from "next.config.js" then every works fine and even the error goes away

[ajmeraaxesh]

As a side effect what happened is images without priority flag were not being able to load correctly or even the buttons weren't working

https://devang-v3-k8ofsz699-ajmeraaxesh.vercel.app/

In the above link, if you click in "Phone" icon in top-right corner. It doesn't do anything. It ideally suppose to show a dropdown

[kdy1]

Can you share more information that can be used to reproduce?
I'm now updating swc crates (with #36187) and trying to see if this issue will be fixed by it.

[ajmeraaxesh]

@kdy1 Like I said, in this link
https://devang-v3-k8ofsz699-ajmeraaxesh.vercel.app/

I have enabled SWC minified and if you open console you would see the error messages thrown around because of some "t" variable being declared twice.

I have removed the "swcMinify: true" in next.config.js the following url:
https://devang-v3-jpmu2piix-ajmeraaxesh.vercel.app

If there is anything more you need from my end, let me know and I would be happy to help

[kdy1]

@ajmeraaxesh I can't debug it using built files.

[balazsorban44]

@ajmeraaxesh we would not a reproduction repository with your source code, not a link to the deployed version. 🙏

In the meantime, @kdy1 you can try https://github.com/balazsorban44/nextjs-35917

[balazsorban44]

This issue has been automatically closed because it received no activity for a month and had no reproduction to investigate. If you think this was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.

[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.