'AWS Amplify: DevTools failed to load SourceMap: Unexpected token < in JSON at position 0
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?
Solution 1:[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)$)([^.]+$)/>
Solution 2:[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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | roob |
| Solution 2 | Craig Conover |