solution Archives - TortoiseFeel

Hello,

If you are facing error :


Unhandled Runtime Error
TypeError: Failed to construct 'URL': Invalid URL

Failed to construct ‘URL’ : Invalid URL in your nextjs app

And you already have following loader ‘imgix’ settings in your next.config.js file

images: {
    // loader and path setting for android build to load nextjsimage and also on web on certain scenarios!
    loader: 'imgix',
    path: '/', // Remove the path prefix for production images
    domains: [
      'xxx.com',
      '*.xxx.com',
      'aaa.xxx.com',
      'via.placeholder.com',
    ],
}

To fix this the solution provided here worked out well!

Code snippet solution: source page stackoverflow

const loaderProp =({ src }) => {
    return src;
}

<Image
      src={currentImage.imageurl}
      alt={currentImage.imageurl} 
      layout="fill"
      className={styles.imageSize} 
      loader={loaderProp}
/>

we just need to add loader prop to the Image tag of next.js component and passdown the callback function which resolves the error above, voila!

Hope this also help you if you are facing this solution in your next.js application.

happy learning!

Hello,

This type error mostly get in scenario when you try to sort the readyonly data array.

For me this was occoured when I tried to sort the direct result from my GraphQL query response data like below:

const sortedData = data.bhangarwalas.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);

In above, data.bhangarwalas is graphql query response results which is readonly in nature as response.

To fix this issue the solution is quick fix for which I have too google to know the result!

Error Screenshot Uncaught TypeError: Cannot assign to read only property ‘0’ of object ‘[object Array]’

Here is the quick solution:

const sortedData = [...data.bhangarwalas];
      sortedData.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);

In code above, We need to clone or you in other words, copying the “data.bhangarwalas” into new array variable and then over that variable, we need to perform sorting operation, which results us right response.

Hope this help you to solve the quick error or to know what scenario this type of error is generated.

Thanks for reading.

Happy learning!