I am trying to deploy a mern full stack app with mapbox on heroku where you can add pins with react-map-gl and it does not seem to display the map after login or registration and I get csp errors. I think if I solve those mapbox would show.
The Content-Security-Policy directive name ''unsafe-inline'' contains one or more invalid characters. Only ASCII alphanumeric characters or dashes '-' are allowed in directive names.
index.js:89 Refused to create a worker from 'blob:https://map-add-pins.herokuapp.com/ca369312-252f-4be1-85be-9bc4b47805a7' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.
I tried to add this meta tag in my index.html to offset the csp but that did not solve the issue.
<meta http-equiv="Content-Security-Policy" content="'unsafe-inline' blob:;">
I would like to know what my meta tag should be or if you could offer another solution.
my heroku link to see issue: https://map-add-pins.herokuapp.com