Create React App - Content Security Policy blocking Google Maps API

Question

I am using Create React App and the Google Maps API (react-google-maps-api). The map component is not working due to Content Security Policy related errors.

I have done a few things to try and resolve the issue:

1. Set INLINE_RUNTIME_CHUNK=false in the .env file for the React App
2. Created a CSP (using instructions from: https://medium.com/@nrshahri/csp-cra-324dd83fe5ff)

The CSP in the index file, after the build is:

<meta http-equiv="Content-Security-Policy" 
content="base-uri 'self'; 
object-src 'none'; script-src 'self' *.googleapis.com 'nonce-vU1URW3TCRPEJ0bwj+Z9Ig=='; 
style-src https://fonts.googleapis.com 'nonce-5pWVpmiuZWCKu1UNllyTwQ=='; 
default-src 'self' ; img-src 'self' *.googleapis.com *.gstatic.com *.google.com *.googleusercontent.com data:; 
script-src-elem 'self' *.googleapis.com; 
frame-src *.google.com; connect-src 'self' *.googleapis.com *.google.com *.gstatic.com data: blob:; 
font-src https://fonts.gstatic.com; worker-src blob:; 
manifest-src 'self'; 
style-src-elem 'self' https://fonts.googleapis.com">

The error I get for the google maps API after these changes is:

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

I do not understand why the error has script-src as simply 'self' or why it says that 'script-src-elem' has not been set.

Thank you