Error on production: Refused to load the script react-google-maps/api

Question

I am using @react-google-maps/api with react js

I’ve a problem on production with useLoadScript hook, isLoaded returning false with the following error

Refused to load the script 'https://maps.googleapis.com/maps/api/js?key=[key]&v=weekly&callback=initMap' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Packages

"react": "^17.0.2",
"@react-google-maps/api": "^2.18.1",

Component Code

  import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_KEy,
  });

Please help.

score 1 · Answer 1 · answered Apr 03 '23 at 04:45

You're trying to load a script from maps.googleapis.com, but this is not permitted due to the Content Security Policy which says that scripts can only be loaded from 'self' (current origin) or inline script. You will need to modify the Content Security Policy and set "script-src 'self' 'unsafe-inline' maps.googleapis.com".

After doing this you'll likely encounter new errors where the policy blocks on connect-src and possibly other directives. If possible, use a web proxy to change the response header when loading the production site from "Content-Security-Policy" to "Content-Security-Policy-Report-Only" and you'll see all the errors at once.

Error on production: Refused to load the script react-google-maps/api

1 Answers1