Unable to load Google Autocomplete script

Forge
,
1

Hi!

When I installed this package to my custom ui react app: react-google-autocomplete - npm
And reference the component like this in my react component:

        <Autocomplete
          apiKey='abcd'
          onPlaceSelected={(place) => {
            console.log(place);
          }}
        />

There is an error in the console and it is not working:
Refused to connect to 'https://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true' because it violates the following Content Security Policy directive: "connect-src 'self' https://api.atlassian.com/metal/ingest

In my manifest.yml I put these:

permissions:
  scopes:
    - read:jira-work
    - read:jira-user
    - manage:jira-configuration
    - storage:app
  content:
    styles:
      - 'unsafe-inline'
    scripts:
      - 'unsafe-inline'
  external:
    scripts:
      - https://maps.googleapis.com
      - https://*.googleapis.com

What can be the problem here? Why is it refusing to load?
Can you please help me?

Thank you very much!

2

Hi @GyorgyVARGA,

The error message suggests that the fetch call being made to the Google Maps API is being blocked. Although you have already allowed scripts to be loaded from https://maps.googleapis.com, in this case, you also need to allow fetch calls to be made for that same domain, e.g:

permissions:
  external:
    fetch:
      client:
        - https://maps.googleapis.com

See https://developer.atlassian.com/platform/forge/manifest-reference/permissions/#fetch for more details

Hope that helps!

3

@AlvaroBezerra thank you very much, it solved my issue! :slight_smile: