This error message bugged for two days. I’ve been working on a web application which is written in React+Typescript. My task is to create a Google Maps component without using any node module helper. So, I have to write most of the things from scratch and I had no former experience with Google Maps library. Before I tell more about my other concerns, let me introduce the error.

Description of the error

I experienced this error on Firefox meanwhile my web-app worked just fine on Chrome and Safari. When I tried to get predictions from Google Maps Api, Firefox showed me the following runtime error.

ReferenceError google is not defined firefox
“ReferenceError: google is not defined” occurs on Firefox

Solution

The solution is simple! While I was adding my Google Maps API script, I forgot to add async and defer attributes. After adding these attributes, my component did not crash on Firefox. There are two ways of doing this:

1. You may include these attributes inside your index.html

Screenshot 2020-04-30 at 16.27.44

2. Or you can add these values during Dynamic Loading process

ReferenceError google is not defined firefox solution

BONUS TIP

Do not add Google Maps API script into the head of your html. It should be at the bottom of your body 🙂

Sercan Leylek / OSLO

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s