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)$)([^.]+$)/>