What causes "TypeError: Failed to construct 'URL': Invalid URL"?

Passing a relative path like '/api/data' without a base URL URL contains spaces or special characters that need encoding The URL string is undefined or null Missing protocol (http:// or https://)

URL Error3 Fixes Available

TypeError: Failed to construct URL — Invalid URL

TypeError: Failed to construct 'URL': Invalid URL

What does this error mean?

The URL constructor threw an error because the string you passed is not a valid URL. This usually happens when a relative URL is passed without a base, or the URL contains invalid characters.

Common Causes

Passing a relative path like '/api/data' without a base URL
URL contains spaces or special characters that need encoding
The URL string is undefined or null
Missing protocol (http:// or https://)

How to Fix It (3 Solutions)

Provide a base URL for relative paths

The URL constructor accepts a second argument as the base.

Code

// ❌ Throws for relative URLs
new URL('/api/data');

// ✅ Provide a base
new URL('/api/data', 'https://example.com');

// ✅ Or use window.location as base
new URL('/api/data', window.location.origin);

Validate the URL before constructing

Wrap in try/catch to handle invalid URLs gracefully.

Code

function isValidUrl(str) {
  try {
    new URL(str);
    return true;
  } catch {
    return false;
  }
}

Encode special characters

Use our URL Encoder to properly encode special characters in your URL.

Fix this error faster with our free tool

URL Encoder/Decoder

Open URL Encoder/Decoder

Related Errors

HTTP

404 Not Found

View fix

Browse all error fixes