Warning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here

Question

I am trying to build an app with Sanity and Nextjs using a tutorial. However when I do npm run dev I get this error while compiling regarding the images, I have clipped off the exhaustive error list but here it is: `

Warning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
    at img
    at div
    at HeroBanner (webpack-internal:///./components/HeroBanner.jsx:16:3)
    at Home (webpack-internal:///./pages/index.js:16:3)
    at App (webpack-internal:///./pages/_app.js:17:3)
    at StyleRegistry (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\styled-jsx\dist\index\index.js:449:36)    
    at PathnameContextProviderAdapter (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\shared\lib\router\adapters.js:60:11)
    at AppContainer (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:289:29)
    at AppContainerWithIsomorphicFiberStructure (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:325:57)
    at renderElement (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5) {
  page: '/'
}
Warning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
    at img
    at div
    at HeroBanner (webpack-internal:///./components/HeroBanner.jsx:16:3)
    at Home (webpack-internal:///./pages/index.js:16:3)
    at App (webpack-internal:///./pages/_app.js:17:3)
    at StyleRegistry (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\styled-jsx\dist\index\index.js:449:36)    
    
Warning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
    at img
    at div
    at HeroBanner (webpack-internal:///./components/HeroBanner.jsx:16:3)
    at Home (webpack-internal:///./pages/index.js:16:3)
    at AppContainer (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:289:29)
    at AppContainerWithIsomorphicFiberStructure (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:325:57)
    at div
    at Body (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\next\dist\server\render.js:612:21)
    at renderElement (C:\Users\doguk\Desktop\ecommercetest\e-commerce\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5) {
  page: '/'
}

`

I tried a bit but I couldn't figure out what was I supposed to do. I still get the same error. I can't display the page this way.

Answer 1

The error is due to the fact that you are trying to navigate to another product with no additional images , while you have selected any of additional images of the first one . This forces the refreshed page to display an product's additional image that does not exist and the page results in error. The best option to solve this problem is to reset the view of the selected image to 0 on page reload , or create additional images to match the number of extra photos of other products.