MIME类型错误：JS文件被当作HTML渲染致页面异常

本地开发完成语言切换功能后，将代码推送到Vercel部署，预期页面正常显示，但实际仅渲染index.html中直接编写的HTML内容，自定义Web Component及插值数据均未显示。

正常页面效果：

实际显示效果：

控制台出现三个错误：

相关代码 #

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Contact</title>
        <meta name="description" content="Do you want your child to grow up knowing what really matters? If so, we will gladly teach them!">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdn.tailwindcss.com"></script>
        <script type="module" src="/languageSwitch.js"></script>
        <script src="/indexComponent.js"></script>
        <link rel="icon" href="/logo.svg">
    </head>
    <body class=" bg-slate-200">
        <index-content></index-content>
        <img id="close" src="/close.svg" class="h-5 fixed top-14 right-5 -mr-2 mt-1 border border-red border-solid bg-slate-300 rounded-xl z-10 hover:bg-slate-400">
        <div id="btnsDiv" class="fixed right-2 top-14 bg-slate-800 pt-7 pb-4 pl-3 pr-5 rounded-sm grid gap-2 sm:flex">
            <button id="Spanish" class="text-sm bg-slate-300 px-2 py-1 mx-1 rounded-xl hover:bg-slate-400 text-slate-950">Español</button>
            <button id="English" class="text-sm bg-slate-300 px-2 py-1 rounded-xl hover:bg-slate-400 text-slate-950">English</button>
        </div>
    </body>
</html>

indexComponent.js

//indexComponent.js
class IndexContent extends HTMLElement {
  connectedCallback() {
      this.updateContent();  // Initialize with default content
  }

  updateContent(content = {}) {
      const { header = {}, main = {} } = content;

      const htmlContent = `
      <header class="shadow-md shadow-slate-700 w-screen py-2 bg-slate-800 flex justify-center items-center content-center">
        <nav class="w-fit flex justify-around items-center content-center">
          <p class="hover:bg-slate-700 px-2 py-1 rounded-sm text-slate-400 border-r border-solid border-slate-300/50"><a href="/good-news/gospel.html${window.location.search}">${header.linkOne || 'Good News'}</a></p>
          <p class="hover:bg-slate-700 px-2 py-1 rounded-sm text-slate-400 border-l border-solid border-slate-300/50"><a href="/index.html${window.location.search}">${header.linkTwo || 'Sign Up'}</a></p>
        </nav>
      </header>
      <main class="w-screen m-0 py-6 flex items-center justify-center">
        <div class="w-9/12">
          <h1 class="text-center font-bold h-5 text-2xl text-slate-900 py-2">${main.title || 'Contact Us'}</h1>
          <form action="https://getform.io/f/bejyndga" method="POST" class="grid justify-center p-8 gap-4">
            <div class="grid justify-center items-center content-center">
              <input class="mb-4 px-2 rounded-sm bg-slate-100 sm:w-60 md:w-80 w-52 text-sm py-1" type="text" name="Parent_Name" placeholder="${main.fields?.parentName || 'Parent Name'}">
              <input class="mb-4 px-2 rounded-sm bg-slate-100 w-52 sm:w-60 md:w-80  text-sm py-1" type="text" name="Child's Name'" placeholder="${main.fields?.childName || 'Child/Children\'s First Name(s)'}">
              <p class="text-xs pb-4 -mt-3 text-slate-900 w-52 sm:w-60 md:w-80">${main.fields?.fieldComment?.comment || '(if you have more than one child, separate their names with commas.)'}</p>
              <input class="mb-4 px-2 rounded-sm bg-slate-100  text-sm py-1" type="number" name="Phone_Number" placeholder="${main.fields?.phoneNumber || 'Phone Number'}">
              <input class="px-2 rounded-sm bg-slate-100  text-sm py-1" type="text" name="Address" placeholder="${main.fields?.address || 'Address'}">
            </div>
            <textarea class="px-2 rounded-sm bg-slate-100  text-sm py-1" name="Additional_Info" placeholder="${main.fields?.additInfo || 'If you need to give us additional information, feel free!'}" rows="6" cols="20"></textarea>
            <button type="submit" class="bg-slate-900 py-2 text-slate-50 rounded-3xl hover:bg-slate-800 active:bg-slate-950">${main.button || 'Send'}</button>
          </form>
          <p class="text-center py-4 -mt-8 italic text-sm">${main.alt || '(Or text us at (210) 549-6522)'}</p>
        </div>
      </main>
      `;
      this.innerHTML = htmlContent;
  }
}

customElements.define("index-content", IndexContent);

完整代码可查看GitHub仓库：QualityWebDev/Sunday_School

恳请各位帮忙解决该问题，谢谢！

内容的提问来源于stack exchange，提问作者Ben Leevey