"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/vnd.trolltech.linguist". Strict MIME type checking is enforced for module scripts per HTML spec."
Hello people! I am trying to deploy this code sample on netlify but I keep getting the above-mentioned error. How can I fix it? It obviously works on the Google documentation page and Stackblitz and JSfiddle but I can't make it work myself. I replaced the api key with my google api credentials but it doesn't make any difference.
function initialize() {
const fenway = { lat: 42.345573, lng: -71.098326 };
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: fenway,
zoom: 14,
}
);
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano") as HTMLElement,
{
position: fenway,
pov: {
heading: 34,
pitch: 10,
},
}
);
map.setStreetView(panorama);
}
declare global {
interface Window {
initialize: () => void;
}
}
window.initialize = initialize;
export {};
<html>
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- playground-hide -->
<script>
const process = { env: {} };
process.env.GOOGLE_MAPS_API_KEY =
"AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg";
</script>
<!-- playground-hide-end -->
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
defer
></script>
</body>
</html>