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