1

I have enable the source map when using vite "vite": "^5.4.18" to build the react project like this:

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

Then I checked the dist folder and the source map has generated. Then I enable the source map in Google Chrome and Firefox. Under the Firefox version 137.0 (aarch64), it shows error:

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

under the Google Chrome Version 133.0.6943.127 (Official Build) (arm64) there is no error ouput but the source map did not work. I have already read the docs https://firefox-source-docs.mozilla.org/devtools-user/debugger/source_map_errors/?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default. Still did not figure out where is going wrong. What should I do to fix this issue? This is the Google Chrome settings:

enter image description here

This is the Firefox source map setting:

enter image description here

I have tried to disable the React devtools and this error fixed but the source map still did not load in browsers.

enter image description here

this is the server side folder look like(this is just an exmple, the random char will change every time build):

/ # 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
1
  • This is a common error message when the server cannot find the requested JSON file and returns a 404 HTML page instead. Check that the files exist in the location defined, that the defined location is accessible from the web, and that the server can read them. Commented Apr 20 at 6:56

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.