upstream image response failed | url parameter is valid but upstream response is invalid #nextjs

hi friends welcome back to my channel my name is purva and today I'm investigating a very interesting issue which I came across while working with next have you ever seen this error while working with turbo repo or even with nextjs you're not able to load a PNG or jpack file in your project so I came across Upstream image response field I'm trying to just show a cat picture which looks like this um um this is in my public folder I've created a very basic Tabo repo uh for the example the problem with me is of course uh the console is showing this error the socket is closed and in the web console I'm not able to note this image so if you'll try to open this URL for the image this is something that I see is in a URL parameter is valid but Upstream response is invalid I did a little bit of research about open issues in veril and I found the plenty of open issues so this one is something similar app is working finally lower environment but introduction application is not working uh this issue seems to appear from version 1404 and it was working fine in 12344 similar issue was raised on August 8 2023 next image URL parameter is valid but Upstream response is invalid the response the solution was however just to Simply upgrade the nextjs version but you see this was fixed in 13413 and it worked and it came again in 1404 this is exactly what I'm going to talk about today how to fix this issue so let's start there are two solutions to it coming to directly one straightforward way is to update your next dependency from current version to the latest version at the moment I'm using 403 if I'll upgrade it to 1411 this is going to work so you can even write it like this I'm going to updated in both the dependencies inside docs and inside web so let me just open package.json for web and update this dency go back to the terminal I'm using pnpm one second install it and run pnpm run Dev go back to the this page now you'll see this will be fixed and we'll see the image of the C okay so if you're looking for a quick fix this is a quick fix simply upgrade your nextus version to the latest one and it is going to work work currently this is working with 1411 okay if something changes in the next version and it is still not working for you watch until the end and I'm going to tell you the exact solution to fix this so let me go back to V code I'm going to undo my changes for the next version so that we can fix this in this version and then rerun the pnpm installs so that we can see the error again make sure that we are fixing the issue in this version so I'm going to refresh this okay my bad this is coming from the cachier so we need to remove the cachier as well move this all right then this ini we dra from Local Host now back to vs code one solution to fix this is simply tell that you don't want to optimize this image okay pass a flag call unoptimized for that image and go back to your localhost you see this is this error is gone and you can see that cat image is loading properly second solution to it would be of course if you have multiple images in multiple pages in your project this is not convenient to pass flag to each and every image so what you'll do go to your next. config.js note that I'm using next. config.js for web because I have only one place where I'm using this image component if you're using in other packages like for example if you're using in docs as well then you have to make changes to an x. config.js of that package that application as well here um we are going to use images and say that you don't want to optimize this and pass unoptimized to True before retesting let's make sure that this is not being picked up from the cachier I'm going to remove the next uh next folder and then rerun the server once I refresh the page you will see that we are able to load the picture of the cat another way to solve this is instead of telling next CH that you do not want to optimize your images you would rather provide your own optimized versions that is deployed in your server and you'll flesh that from your server next Chas will pull it out in its local cachier and then show it from there so we are not going to pass the unoptimized flag but we are going to use a loader file you can also check the reference from next ch's official documentation about loader file so basically you need to Pro say that you want to provide a custom loader and provide a location to your loader file this this is exactly what we're going to do so I'm just simply going going to copy this and paste it here of course this location is something that we need to change according to the location that we are going to provide for our loader file I'm going to keep it inside app for web you can provide different loader files for web and the docs so loader. JS it is and as for the example I'm simply going to copy what is there in the website with this you will also see a lending error um so for that you need to add the configuration NTS config.js here in the include you need to provide the path for your loader file so app app SL and this should fix the L Issue okay of course we are we cannot use example.com over here for testing purposes I am going to use my Local Host which is not ideal you should upload it to your server and then use it over here but just for uh showing it to you that this works I'm going to use Local Host and the current P okay uh so basically what I'm telling this shares is fish these images from remote from this path the name is this source is this with width this width and this quality okay and now now here I have to provide the path for my um loader file which is going to Bea and then loads that's it save it go back to your terminal compile it and let's see if it works make sure you we do not have do next folder which we do have right now so I'm going to delete it because last time it work properly and must be loaded the cash so yeah once again we'll run PN pm run Dev once it is compiled let's go back to the web and refresh this page you see the cat image is loading properly just to make sure everything is working fine I'm going to page. TSS and change from cat logo to something else in my public folder so I'm going to show next chairs. PNG okay this is also perfectly you can change width height priority according to your preferences quick recap there are few Solutions one is to Simply upgrade to the latest version which in our case was 14.11 update your package.json and this will work for you second if it still doesn't work in the latest version of njs you can provide unoptimized through in your next. config.js you can also do that individually for each image third solution is to provide your custom optimized version of the images so you have to pass the loader file you have to provide the loader file location Lo say that loader is custom and create a loader. JS file simply fetching the loader from your server do check the references from next year's documentation there is a huge documentation about what kind of loaders that you can use uh there are some default um loaders as well which are coming from aam my cloud in see you can install it anywhere and then you can use aam my loader you can use cloud iny cloud Fair anything that works for you that's it for today I hope it resolves your problem thanks for watching and don't forget to subscribe to my channel

Channel: Poorva

Views: 271

Keywords: url parameter is valid but upstream response is invalid, url parameter is valid but upstream response is invalid next js 14, url parameter is valid but upstream response is invalid next js, upstream image response failed, upstream image response failed for, upstream image response failed for 404, upstream image response failed for 403, upstream image response failed for response aborted, upstream image response failed for typeerror fetch failed

Id: APFz134tCo4

Length: 9min 47sec (587 seconds)

Published: Mon Mar 18 2024