I am creating a weather app using front end only (HTML, CSS, and Javascript) using NWS (National Weather Service) API, Google Javascript Library API, Google Places API, and Google Geocoding API. I have created two async functions getCoordinates(region), and getWeatherData(latitude, longitude). The entire program works without imports and exports. However, when I try to import and export the functions, it doesn’t work. I am getting an error message “Uncaught (in promise) InvalidValueError…” with the Google Javascript API library I am loading in the html file where I use loading=async in the url. However, I have no problem with without imports and exports. Please help. Thank you.
In the .html file, I changed the script type to module from type/javascript where I load my main index.js file.
from :
“”
to
“”
I have not changed the Google javascript url that I load as async defer js file as the last line before body tag finishes.
In the index.js file, I import getCoordinates from my location.js file like this:
“import getCoordinates from ‘./location.js’;”
I also import getWeatherData from a different file weather.js like this:
“import { getWeatherData } from ‘./weather.js’;”
In location.js, I export default getCoordiates(region) function like this:
“export default async function getDefault(region) { //code here }”
In weather.js file, I export getWeatherData(latitude, longitude) like this:
“export async function getWeatherData(latitude, longitude) { //code here }”
Note quotes above are not part of the code. This is just to quote what I coded.