使用TypeScript+React开发的网站部署后出现MIME类型错误求助

问题详情 #

本地用TypeScript和React开发的网站运行正常，但通过Filezilla上传到freehosting.com的public_html目录后，浏览器报错：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

• 主机无日志功能，尝试创建的.htaccess配置无效：

<IfModule
    text/javascript js tsx
/IfModule>

• 响应头中content-type显示为text/HTML，网络面板显示index.html正常返回，但main.tsx文件的MIME类型不符合要求
• 项目的index.html直接引入TSX脚本：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/assets/images/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xxxx</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

根本原因 #

该主机仅支持PHP和HTML类型的网站，无法正确识别和解析TypeScript（.tsx）文件——既不能设置正确的MIME类型，也无法编译TSX为浏览器可执行的JavaScript。

解决方案 #

1. 上传构建后的静态文件
   React+TypeScript项目不能直接上传源码，需要先编译为浏览器可识别的静态资源：

• 在本地项目根目录执行构建命令：

npm run build

• 将生成的build目录下的所有文件（包含编译后的HTML、JS、CSS等）上传到主机的public_html目录，替换原有的源码文件。

2. 修正.htaccess配置（可选，针对构建后资源）
   如果构建后仍有静态资源MIME类型问题，使用正确的.htaccess语法设置：

<IfModule mod_mime.c>
  AddType text/javascript .js
  AddType text/css .css
  AddType image/svg+xml .svg
</IfModule>

内容的提问来源于stack exchange，提问作者asha mehta