AWS Amplify: DevTools failed to load SourceMap: Unexpected token < in JSON at position 0

Question

I am getting several warnings when loading my website on Google Chrome similar to the following:

DevTools failed to load SourceMap: Could not parse content for https://mywebsite.com/static/js/2.abcd1234.chunk.js.map: Unexpected token < in JSON at position 0

My webapp is a React application (create-react-app) deployed on AWS Amplify. I do not get these warnings when running the app locally. How do I get rid of these warnings?

Answer 1

This is a problem caused by using react-router with AWS amplify. See this github issue . It suggests adding the following entry in the Rewrites and redirects section of App settings in AWS Amplify:

Source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>

Target address:
/index.html

Type:
200 (Rewrite)

To solve my problem, I added the map extension to this regex:

Source address:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map)$)([^.]+$)/>

Answer 2

I checked my Rewrites and redirects settings and it was already configured as per the below answer by "roob" but also had json at the end. I removed it to see if that helped. Either way, I still got the error.

More research with a colleague and found another root cause. Answered here: AWS Amplify error: Failed to parse source map... file: Error: ENOENT: no such file or directory