使用Vite构建后浏览器无法加载Source Map的问题求助

问题背景 #

使用vite@^5.4.18构建React项目，已配置开启Source Map，dist目录下已生成对应的.map文件，但出现以下问题：

• Chrome（Version 133.0.6943.127 arm64）中Source Map无法生效
• Firefox（137.0 aarch64）报错：

Source map error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: null
Source Map URL: installHook.js.map

禁用React DevTools后Firefox报错消失，但Source Map仍不加载。

项目构建配置 #

build: {
    outDir: "build",
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react", "react-router-dom", "react-dom"],
          reddwarf: ["rd-component", "rdjs-wheel"],
        },
      },
    },
  },

服务器文件结构 #

/ # cd /usr/share/nginx/html/
/usr/share/nginx/html # ls
50x.html                    favicon.ico                 index.html                  lshort-zh-cn.pdf            pdfjs-dist
assets                      favicons.ico                logo192.png                 manifest.json               robots.txt
css                         fontawesome-free-6.5.1-web  logo512.png                 pdf.worker.min.js
/usr/share/nginx/html # cd assets/
/usr/share/nginx/html/assets # ls
1c-DqW75Wan.js                            go-btdo_zbo.js                            php-extras-CHnT5SWp.js
1c-DqW75Wan.js.map                        go-btdo_zbo.js.map                        php-extras-CHnT5SWp.js.map
CollarCodeEditor-B7ERf9gF.css             go-module-7FNj4wBn.js                     php-template-Bb4LpDrU.js
CollarCodeEditor-Bepd7stu.js              go-module-7FNj4wBn.js.map                 php-template-Bb4LpDrU.js.map
CollarCodeEditor-Bepd7stu.js.map          golo-C_SQP3HN.js                          phpdoc-BjHJqnaq.js
abap-CRV73gSa.js                          golo-C_SQP3HN.js.map                      phpdoc-BjHJqnaq.js.map
abap-CRV73gSa.js.map                      gradle-sP5Ab3zN.js                        plaintext-Bgh3wkOK.js
abnf-DXEVwDWd.js                          gradle-sP5Ab3zN.js.map                    plaintext-Bgh3wkOK.js.map
abnf-DXEVwDWd.js.map                      graphql-B1Hbu_-v.js                       plsql-D_3wJ6Oo.js
abnf-JeaXdS1h.js                          graphql-B1Hbu_-v.js.map                   plsql-D_3wJ6Oo.js.map
abnf-JeaXdS1h.js.map                      groovy-C9vCdJjT.js                        pony-CI1rI9WF.js
accesslog-QfWJmu3P.js                     groovy-C9vCdJjT.js.map                    pony-CI1rI9WF.js.map
accesslog-QfWJmu3P.js.map                 groovy-dZ2X98ho.js                        powerquery-DvdztBVW.js

排查与解决建议 #

• 校验Source Map文件合法性：挑选任意一个.map文件，用JSON校验工具（如本地jq命令：jq . assets/1c-DqW75Wan.js.map）检查是否为有效JSON。若报错说明文件损坏，执行rm -rf build && vite build重新构建。
• 修复Nginx MIME类型配置：在Nginx配置文件中添加或确认存在application/json对应.map文件的规则，避免服务器返回错误的Content-Type导致浏览器解析失败：

  types {
      application/json map;
  }
  

  修改后重启Nginx服务。
• 排查React DevTools干扰：更新React DevTools至最新版本，或在构建时通过Vite配置排除DevTools相关代码的Source Map生成。
• 切换Source Map类型测试：修改Vite构建配置中的sourcemap值为'hidden'或'inline'：

  build: {
      sourcemap: 'hidden' // 或 'inline'
  }
  

  重新构建后测试Source Map是否生效，hidden模式不会在bundle中添加SourceMappingURL，需手动验证文件；inline模式将Source Map嵌入JS文件，可直接观察是否生效。
• 清理缓存：清空浏览器缓存，删除本地build目录后重新构建，避免旧的损坏文件残留。
• 检查文件路径一致性：查看JS文件末尾的//# sourceMappingURL=xxx.js.map路径，对比服务器上的实际文件路径，注意Linux服务器区分大小写，确保路径完全匹配。

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