In my launch.json file, I have:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "edge",
      "request": "launch",
      "name": "localhost (Edge)",
      "url": "https://localhost:16778",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost (Chrome)",
      "url": "https://localhost:16778",
      "webRoot": "${workspaceFolder}"
    }

  ]
}

I have a function handleYoutubeSubmit() that takes the Youtube video id and creates an embeddedURL and plays it in an iframe:

const handleYoutubeSubmit = (e) => {
     e.preventDefault();
     try {
         const videoId = getYoutubeId(youtubeUrl);
         if (videoId) {
            
             const embedUrl = `/${videoId}?enablejsapi=0`;
             console.log("Generated YouTube Embed URL:", embedUrl);
             setVideoSource(embedUrl);
         } else {
             console.error("Invalid YouTube URL");
             alert("Invalid YouTube URL. Please check the link and try again.");
         }
     } catch (error) {
         console.error("YouTube URL processing error:", error);
         alert("Error processing YouTube URL");
     }
 };

 const getYoutubeId = (url) => {
     if (!url) return null;

     const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
     const match = url.match(regExp);

     return (match && match[2].length === 11) ? match[2] : null;
 };

 <div className="video-container">
     {videoSource.includes('youtube') ? (
         <iframe
             width="640"
             height="360"
             src={videoSource}
             frameBorder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowFullScreen
             title="YouTube Video Player"
         ></iframe>
     ) : (
         videoSource && (
             <video ref={videoRef} width="640" height="360" controls>
                 <source src={videoSource} type="video/mp4" />
                 Your browser does not support the video tag.
             </video>
         )
     )}
 </div>

When I run test this using the first browser in my launch.json file, I get the error

TypeError: Failed to execute 'query' on 'Permissions': Illegal invocation

But it runs and works completely fine when I run it in the second listed browser. I've swapped positions in the list and regardless of which is first/second, the first browser will always throw the error and break the program. Does anyone know why?