部署React应用至render.com时遇MIME类型错误，求解决方案

错误信息 #

"Refused to apply style from 'https://delivery-app-test.onrender.com/shopping-cart/static/css/main.7acaea2f.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

问题背景 #

将React应用部署到Render.com时出现上述错误，使用styled-components和MUI处理样式，当前index.html结构如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <base href="/" />
    <link rel="stylesheet" href="../src/index.css" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>

    <script type="text/javascript">
      (function (l) {
        if (l.search[1] === '/') {
          var decoded = l.search
            .slice(1)
            .split('&')
            .map(function (s) {
              return s.replace(/~and~/g, '&');
            })
            .join('?');
          window.history.replaceState(
            null,
            null,
            l.pathname.slice(0, -1) + decoded + l.hash
          );
        }
      })(window.location);
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    -->
  </body>
</html>

错误原因分析 #

这个错误的核心是：请求的CSS文件实际返回的是HTML内容（通常是404错误页面），导致浏览器识别的MIME类型为text/html而非text/css，触发严格MIME检查报错。常见诱因包括：

1. index.html中引用了生产环境不存在的本地CSS文件
2. 应用基础路径配置与实际部署子路径不匹配
3. Render平台的部署配置未正确指向静态资源目录

修复步骤 #

• 移除无效的CSS引用
  当前index.html中的<link rel="stylesheet" href="../src/index.css">是错误的：生产打包后src目录不会被包含在build产物中，请求该路径会返回404的HTML页面。直接删除这一行即可，create-react-app会自动将index.css打包并注入到最终的index.html里。

• 修正基础路径配置
  应用部署在/shopping-cart子路径下，但当前<base href="/">会让资源请求从根路径出发，导致静态资源路径错误。两种修正方式：

  1. 直接修改index.html中的base标签：

     <base href="/shopping-cart/" />
     

  2. 打包时指定PUBLIC_URL环境变量（推荐，避免手动修改文件）：

     PUBLIC_URL=/shopping-cart npm run build
     

     此命令会自动替换index.html中的%PUBLIC_URL%和base href为正确路径。

• 检查Render部署配置

  • 确认Build Command设置为npm run build（使用yarn则设为yarn build）
  • 确认Publish Directory设置为build（create-react-app的默认打包产物目录）
  • 若为单页应用，开启Render的"Rewrite all requests to /index.html"选项，防止路由跳转时返回404。

• 验证样式库配置
  虽然本次错误与styled-components/MUI无直接关联，但需确保：

  • styled-components未在生产打包时禁用样式生成
  • MUI已正确配置ThemeProvider，无错误的样式覆盖逻辑

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