Vite+React+TS页面空白求助：MIME类型错误排查

错误原因分析 #

控制台出现的Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain"错误，核心问题是浏览器请求main.tsx时，服务器返回的文件类型不符合ES模块的要求。最常见的触发场景是直接双击打开本地的index.html文件——此时系统用本地文件协议（file://）加载资源，不会正确处理TSX文件的编译和MIME类型映射。

解决方案 #

1. 启动Vite开发服务器
   在项目根目录执行以下命令：

   # 首次运行或依赖变更时先安装依赖
   npm install
   # 启动开发服务器
   npm run dev
   

   若使用yarn/pnpm：

   yarn install && yarn dev
   

2. 访问正确的地址
   服务器启动后，控制台会输出类似Local: http://localhost:5173/的地址，在浏览器中打开这个地址即可，不要直接打开本地的index.html文件。

额外排查点 #

如果启动服务器后仍有问题，可检查以下内容：

• 确认Vite为最新稳定版，旧版本可能存在兼容性问题：

  npm install vite@latest --save-dev
  

• 检查项目根目录的vite.config.ts（若存在）是否有错误配置，比如路径映射错误
• 确认所有.tsx文件扩展名拼写正确，没有写成.ts或其他错误格式

代码验证 #

你提供的代码本身无逻辑错误：

• index.html中script type="module" src="./main.tsx"的写法符合Vite要求
• main.tsx正确挂载了React应用并引入了App组件
• App.tsx的Todo逻辑正常，无语法错误

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