Typeerror: failed to construct ‘url’: invalid url

In this article, we are going to explore the “typeerror: failed to construct ‘url’: invalid url” error message.

If this error gives you a headache then you must continue reading.

In here, we going to show you how to fix this “failed to construct ‘url’: invalid url” typerror.

So, let’s get started.

What is “typeerror: failed to construct ‘url’: invalid url”?

The “typeerror: failed to construct ‘url’: Invalid url” is an error message indicating that the URL you have been passed to the URL constructor is not a valid URL.

In simple words, the “failed to construct ‘url’ invalid url” error message occurs when there is an issue with the URL format or syntax.

For example:

const url = new URL('example.com');

As you can see in the example, the URL format is incorrect, and it does not include the protocol (HTTP or HTTPS) components.

You have to ensure that the URL string passed to the URL(constructor) is valid and properly formatted. 

In this case, the scheme should be “https” or “http” instead of “htp.” 

Here’s the correct example code:

const url = new URL('https://example.com');

Why does this error occur?

Here are some of the common causes why does this error message occurs in your code:

• Invalid URL Format

• Incorrect URL Syntax

• Missing Required Components in the URL

The URL constructor is designed to only accept valid URLs, so if the URL is not properly formatted or contains invalid characters, it will throw a typerrror indicating failed to construct ‘url’: Invalid url.

How to fix “typeerror: failed to construct ‘url’: invalid url”?

To fix the error, you have to ensure that the URL string you’re passing to the URL() constructor is a valid URL.

Here are some steps you can take to fix this error:

✅ Check the URL string for typos or mistakes.

✅ Ensure the URL string includes the protocol like (http:// or https://).

✅ Ensure the URL string is properly encoded if it contains special characters.

Solutions for “typeerror: failed to construct ‘url’: invalid url”

Here are the following solutions you can use to resolve the error message.

1. Use the correct URL format

In here, we provided a valid URL format to the URL() constructor, which creates a new URL object with the correct format.

The console.log() statement outputs the URL string of the object.

let urlString = "www.itsourcecode.com"; 
urlString = "https://" + urlString; 
const url = new URL(urlString);
console.log(url.href);

Output:

https://www.itsourcecode.com/

2. Encode special characters in the URL

In some case if the URL contains special characters, such as spaces or symbols, they need to be encode properly.

To solve it, you have to make sure that special characters are encoded using the correct encoding method.

const url = new URL('https://www.itsourcecode.com/search?q=JavaScript%20Tutorial');
console.log(url.href);

3. Use a base URL when creating relative URLs

When you’re creating a relative URL, you must provide a base URL as the second argument to the URL() constructor.

const baseUrl = "https://www.itsourcecode.com";
const relativeUrlString = "/search?q=JavaScript";
const url = new URL(relativeUrlString, baseUrl);
console.log(url.href); 

Output:

https://www.example.com/search?q=JavaScript

4. Use an absolute URL instead of a relative URL.

When you are having trouble creating a relative URL, you can also try to use an absolute URL instead.

const urlString = "https://www.itsourcecode.com/search?q=JavaScript";
const url = new URL(urlString);
console.log(url.href);

Output:

https://www.example.com/search?q=JavaScript

5. Use a try-catch block to handle errors

When you are not sure whether a URL is valid or not, you can use a try-catch block to handle any errors that may occur.

This will prevent the error from being thrown, and allow the user to handle the error in a more controlled manner.

try {
  const url = new URL('https://www.itsourcecode.com/');
  console.log(url.href);
} catch (err) {
  console.error('Invalid URL:', err);
}

Frequently Asked Questions (FAQs)

Conclusion

In conclusion, the “typeerror: failed to construct ‘url’: Invalid url” is an error message indicating that the URL you have been passed to the URL constructor is not a valid URL.

This article already provides several solutions above so that you can fix the error message immediately.

We are hoping that this article provided you with sufficient solutions to get rid of the error.

You could also check out other “typeerror” articles that may help you in the future if you encounter them.

• Typeerror: do not know how to serialize a bigint
• Typeerror: argument of type ‘builtin_function_or_method’ is not iterable
• Typeerror: ‘bool’ object is not subscriptable