Issue when generating app with v0.7.2+

[JoseGoncalves]

My application build fails with the latest release (0.7.6). Here is my build log:

 ERROR  Failed to compile with 1 error                                                            4:03:31 PM

 error  in ./node_modules/vue3-google-map/dist/es/index.js

Module parse failed: Unexpected token (1:6510)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import{ref as e,defineComponent as t,provide as l,onBeforeUnmount as o,onMounted as r,toRef as s,watch as i,openBlock as a,createBlock as n,createVNode as y,mergeProps as p,renderSlot as c,inject as f,Fragment as m,createCommentVNode as u,withDirectives as d,vShow as g}from"vue";var T=function e(t,l){if(t===l)return!0;if(t&&l&&"object"==typeof t&&"object"==typeof l){if(t.constructor!==l.constructor)return!1;var o,r,s;if(Array.isArray(t)){if((o=t.length)!=l.length)return!1;for(r=o;0!=r--;)if(!e(t[r],l[r]))return!1;return!0}if(t.constructor===RegExp)return t.source===l.source&&t.flags===l.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===l.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===l.toString();if((o=(s=Object.keys(t)).length)!==Object.keys(l).length)return!1;for(r=o;0!=r--;)if(!Object.prototype.hasOwnProperty.call(l,s[r]))return!1;for(r=o;0!=r--;){var i=s[r];if(!e(t[i],l[i]))return!1}return!0}return t!=t&&l!=l};class h{constructor({apiKey:e,channel:t,client:l,id:o="__googleMapsScriptId",libraries:r=[],language:s,region:i,version:a,mapIds:n,nonce:y,retries:p=3,url:c="https://maps.googleapis.com/maps/api/js"}){if(this.CALLBACK="__googleMapsCallback",this.callbacks=[],this.done=!1,this.loading=!1,this.errors=[],this.version=a,this.apiKey=e,this.channel=t,this.client=l,this.id=o||"__googleMapsScriptId",this.libraries=r,this.language=s,this.region=i,this.mapIds=n,this.nonce=y,this.retries=p,this.url=c,h.instance){if(!T(this.options,h.instance.options))throw new Error(`Loader must not be called again with different options. ${JSON.stringify(this.options)} !== ${JSON.stringify(h.instance.options)}`);return h.instance}h.instance=this}get options(){return{version:this.version,apiKey:this.apiKey,channel:this.channel,client:this.client,id:this.id,libraries:this.libraries,language:this.language,region:this.region,mapIds:this.mapIds,nonce:this.nonce,url:this.url}}createUrl(){let e=this.url;return e+=`?callback=${this.CALLBACK}`,this.apiKey&&(e+=`&key=${this.apiKey}`),this.channel&&(e+=`&channel=${this.channel}`),this.client&&(e+=`&client=${this.client}`),this.libraries.length>0&&(e+=`&libraries=${this.libraries.join(",")}`),this.language&&(e+=`&language=${this.language}`),this.region&&(e+=`&region=${this.region}`),this.version&&(e+=`&v=${this.version}`),this.mapIds&&(e+=`&map_ids=${this.mapIds.join(",")}`),e}load(){return this.loadPromise()}loadPromise(){return new Promise(((e,t)=>{this.loadCallback((l=>{l?t(l):e()}))}))}loadCallback(e){this.callbacks.push(e),this.execute()}setScript(){if(document.getElementById(this.id))return void this.callback();const e=this.createUrl(),t=document.createElement("script");t.id=this.id,t.type="text/javascript",t.src=e,t.onerror=this.loadErrorCallback.bind(this),t.defer=!0,t.async=!0,this.nonce&&(t.nonce=this.nonce),document.head.appendChild(t)}deleteScript(){const e=document.getElementById(this.id);e&&e.remove()}resetIfRetryingFailed(){const e=this.retries+1;this.done&&!this.loading&&this.errors.length>=e&&(this.deleteScript(),this.done=!1,this.loading=!1,this.errors=[],this.onerrorEvent=null)}loadErrorCallback(e){if(this.errors.push(e),this.errors.length<=this.retries){const e=this.errors.length*Math.pow(2,this.errors.length);console.log(`Failed to load Google Maps script, retrying in ${e} ms.`),setTimeout((()=>{this.deleteScript(),this.setScript()}),e)}else this.onerrorEvent=e,this.callback()}setCallback(){window.__googleMapsCallback=this.callback.bind(this)}callback(){this.done=!0,this.loading=!1,this.callbacks.forEach((e=>{e(this.onerrorEvent)})),this.callbacks=[]}execute(){window.google&&window.google.maps&&window.google.maps.version&&(console.warn("Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match."),this.callback()),this.resetIfRetryingFailed(),this.done?this.callback():this.loading||(this.loading=!0,this.setCallback(),this.setScript())}}const b=Symbol("api"),v=Symbol("map"),k=e(null),C=["bounds_changed","center_changed","click","dblclick","drag","dragend","dragstart","heading_changed","idle","maptypeid_changed","mousemove","mouseout","mouseover","projection_changed","resize","rightclick","tilesloaded","tilt_changed","zoom_changed"],w=["animation_changed","click","dblclick","rightclick","dragstart","dragend","drag","mouseover","mousedown","mouseout","mouseup","draggable_changed","clickable_changed","contextmenu","cursor_changed","flat_changed","rightclick","zindex_changed","icon_changed","position_changed","shape_changed","title_changed","visible_changed"],x=["click","dblclick","drag","dragend","dragstart","mousedown","mousemove","mouseout","mouseover","mouseup","rightclick"],_=x,S=x.concat(["bounds_changed"]),O=x.concat(["center_changed","radius_changed"]);var P=t({props:{apiKey:{type:String,default:""},libraries:Array,region:String,language:String,backgroundColor:String,center:Object,clickableIcons:{type:Boolean,default:void 0},controlSize:Number,disableDefaultUi:{type:Boolean,default:void 0},disableDoubleClickZoom:{type:Boolean,default:void 0},draggable:{type:Boolean,default:void 0},draggableCursor:String,draggingCursor:String,fullscreenControl:{type:Boolean,default:void 0},fullscreenControlPosition:String,gestureHandling:String,heading:Number,keyboardShortcuts:{type:Boolean,default:void 0},mapTypeControl:{type:Boolean,default:void 0},mapTypeControlOptions:Object,mapTypeId:{type:[Number,String]},maxZoom:Number,minZoom:Number,noClear:{type:Boolean,default:void 0},panControl:{type:Boolean,default:void 0},panControlPosition:String,restriction:Object,rotateControl:{type:Boolean,default:void 0},rotateControlPosition:String,scaleControl:{type:Boolean,default:void 0},scaleControlStyle:Number,scrollwheel:{type:Boolean,default:void 0},streetView:Object,streetViewControl:{type:Boolean,default:void 0},streetViewControlPosition:String,styles:Array,tilt:Number,zoom:Number,zoomControl:{type:Boolean,default:void 0},zoomControlPosition:String},emits:C,setup(t,{emit:a}){const n=e(null),y=e(!1),p=e(null),c=e(null);l(v,p),l(b,c);const f=()=>{const e={backgroundColor:t.backgroundColor,center:t.center,clickableIcons:t.clickableIcons,controlSize:t.controlSize,disableDefaultUI:t.disableDefaultUi,disableDoubleClickZoom:t.disableDoubleClickZoom,draggable:t.draggable,draggableCursor:t.draggableCursor,draggingCursor:t.draggingCursor,fullscreenControl:t.fullscreenControl,fullscreenControlOptions:t.fullscreenControlPosition?{position:c.value?.ControlPosition[t.fullscreenControlPosition]}:{},gestureHandling:t.gestureHandling,heading:t.heading,keyboardShortcuts:t.keyboardShortcuts,mapTypeControl:t.mapTypeControl,mapTypeControlOptions:t.mapTypeControlOptions,mapTypeId:t.mapTypeId,maxZoom:t.maxZoom,minZoom:t.minZoom,noClear:t.noClear,panControl:t.panControl,panControlOptions:t.panControlPosition?{position:c.value?.ControlPosition[t.panControlPosition]}:{},restriction:t.restriction,rotateControl:t.rotateControl,rotateControlOptions:t.rotateControlPosition?{position:c.value?.ControlPosition[t.rotateControlPosition]}:{},scaleControl:t.scaleControl,scaleControlOptions:t.scaleControlStyle?{style:t.scaleControlStyle}:{},scrollwheel:t.scrollwheel,streetView:t.streetView,streetViewControl:t.streetViewControl,streetViewControlOptions:t.streetViewControlPosition?{position:c.value?.ControlPosition[t.streetViewControlPosition]}:{},styles:t.styles,tilt:t.tilt,zoom:t.zoom,zoomControl:t.zoomControl,zoomControlOptions:t.zoomControlPosition?{position:c.value?.ControlPosition[t.zoomControlPosition]}:{}};return Object.keys(e).forEach((t=>void 0===e[t]&&delete e[t])),e};return o((()=>{p.value&&c.value?.event.clearInstanceListeners(p.value)})),r((()=>{try{k.value=new h({apiKey:t.apiKey,version:"weekly",libraries:t.libraries||["places"],language:t.language,region:t.region})}catch(e){console.error(e)}finally{k.value.load().then((()=>{const{Map:e}=c.value=google.maps;p.value=new e(n.value,f()),C.forEach((e=>{p.value?.addListener(e,(t=>a(e,t)))})),y.value=!0;const l=Object.keys(t).filter((e=>!["center","zoom"].includes(e))).map((e=>s(t,e)));i([()=>t.center,()=>t.zoom,...l],(([e,t],[l,o])=>{const{center:r,zoom:s,...i}=f();p.value?.setOptions(i),void 0!==t&&t!==o&&p.value?.setZoom(t),e&&(l&&e.lng===l.lng&&e.lat===l.lat||p.value?.panTo(e))}))}))}})),{mapRef:n,ready:y,map:p,api:c}}});P.render=function(e,t,l,o,r,s){return a(),n("div",null,[y("div",p(e.$attrs,{ref:"mapRef"}),null,16),c(e.$slots,"default")])},P.__file="src/components/GoogleMap.vue";const j=(t,l,o,r)=>{let s=null;const a=e(null),n=f(v,e(null)),y=f(b,e(null));return i([n,o],((e,i,p)=>{n.value&&y.value&&(a.value=s=new y.value[t]({...o.value,map:n.value}),l.forEach((e=>{s?.addListener(e,(t=>r(e,t)))}))),p((()=>{s&&(y.value?.event.clearInstanceListeners(s),s.setMap(null))}))}),{immediate:!0}),{component:a}};var I=t({props:{options:{type:Object,required:!0}},emits:w,setup(e,{emit:t}){const l=s(e,"options");return{marker:j("Marker",w,l,t)}},render:()=>null}),z=t({props:{options:{type:Object,required:!0}},emits:x,setup(e,{emit:t}){const l=s(e,"options");return{polyline:j("Polyline",x,l,t)}},render:()=>null}),B=t({props:{options:{type:Object,required:!0}},emits:_,setup(e,{emit:t}){const l=s(e,"options");return{polygon:j("Polygon",_,l,t)}},render:()=>null}),E=t({props:{options:{type:Object,required:!0}},emits:S,setup(e,{emit:t}){const l=s(e,"options");return{rectangle:j("Rectangle",S,l,t)}},render:()=>null}),$=t({props:{options:{type:Object,required:!0}},emits:O,setup(e,{emit:t}){const l=s(e,"options");return{circle:j("Circle",O,l,t)}},render:()=>null}),M=t({props:{position:{type:String,required:!0},index:Number},emits:["content:loaded"],setup(t,{emit:l}){const o=e(null),r=f(v,e(null)),s=f(b,e(null)),a=e(!1),n=i(s,(()=>{s.value&&r.value&&(s.value.event.addListenerOnce(r.value,"tilesloaded",(()=>{a.value=!0,l("content:loaded")})),n())}));return i([r,()=>t.position,()=>t.index],((e,[l,i],a)=>{r.value&&s.value&&(t.index&&(o.value.index=t.index),o.value&&r.value.controls[s.value.ControlPosition[t.position]].push(o.value)),a((()=>{if(r.value&&s.value&&i){let e;r.value.controls[s.value.ControlPosition[i]].forEach(((t,l)=>{t===o.value&&(e=l)})),e&&r.value.controls[s.value.ControlPosition[i]].removeAt(e)}}))}),{immediate:!0}),{controlRef:o,showContent:a}}});const K={ref:"controlRef"};M.render=function(e,t,l,o,r,s){return a(),n(m,null,[u("\n    v-show must be used instead of v-if otherwise there\n    would be no rendered content pushed to the map controls\n  "),d(y("div",K,[c(e.$slots,"default")],512),[[g,e.showContent]])],2112)},M.__file="src/components/CustomControl.vue";const N=[{elementType:"geometry",stylers:[{color:"#1d2c4d"}]},{elementType:"labels.text.fill",stylers:[{color:"#8ec3b9"}]},{elementType:"labels.text.stroke",stylers:[{color:"#1a3646"}]},{featureType:"administrative.country",elementType:"geometry.stroke",stylers:[{color:"#4b6878"}]},{featureType:"administrative.land_parcel",elementType:"labels.text.fill",stylers:[{color:"#64779e"}]},{featureType:"administrative.province",elementType:"geometry.stroke",stylers:[{color:"#4b6878"}]},{featureType:"landscape.man_made",elementType:"geometry.stroke",stylers:[{color:"#334e87"}]},{featureType:"landscape.natural",elementType:"geometry",stylers:[{color:"#023e58"}]},{featureType:"poi",elementType:"geometry",stylers:[{color:"#283d6a"}]},{featureType:"poi",elementType:"labels.text.fill",stylers:[{color:"#6f9ba5"}]},{featureType:"poi",elementType:"labels.text.stroke",stylers:[{color:"#1d2c4d"}]},{featureType:"poi.park",elementType:"geometry.fill",stylers:[{color:"#023e58"}]},{featureType:"poi.park",elementType:"labels.text.fill",stylers:[{color:"#3C7680"}]},{featureType:"road",elementType:"geometry",stylers:[{color:"#304a7d"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{color:"#98a5be"}]},{featureType:"road",elementType:"labels.text.stroke",stylers:[{color:"#1d2c4d"}]},{featureType:"road.highway",elementType:"geometry",stylers:[{color:"#2c6675"}]},{featureType:"road.highway",elementType:"geometry.stroke",stylers:[{color:"#255763"}]},{featureType:"road.highway",elementType:"labels.text.fill",stylers:[{color:"#b0d5ce"}]},{featureType:"road.highway",elementType:"labels.text.stroke",stylers:[{color:"#023e58"}]},{featureType:"transit",elementType:"labels.text.fill",stylers:[{color:"#98a5be"}]},{featureType:"transit",elementType:"labels.text.stroke",stylers:[{color:"#1d2c4d"}]},{featureType:"transit.line",elementType:"geometry.fill",stylers:[{color:"#283d6a"}]},{featureType:"transit.station",elementType:"geometry",stylers:[{color:"#3a4762"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#0e1626"}]},{featureType:"water",elementType:"labels.text.fill",stylers:[{color:"#4e6d70"}]}],L=[{elementType:"geometry",stylers:[{color:"#242f3e"}]},{elementType:"labels.text.stroke",stylers:[{color:"#242f3e"}]},{elementType:"labels.text.fill",stylers:[{color:"#746855"}]},{featureType:"administrative.locality",elementType:"labels.text.fill",stylers:[{color:"#d59563"}]},{featureType:"poi",elementType:"labels.text.fill",stylers:[{color:"#d59563"}]},{featureType:"poi.park",elementType:"geometry",stylers:[{color:"#263c3f"}]},{featureType:"poi.park",elementType:"labels.text.fill",stylers:[{color:"#6b9a76"}]},{featureType:"road",elementType:"geometry",stylers:[{color:"#38414e"}]},{featureType:"road",elementType:"geometry.stroke",stylers:[{color:"#212a37"}]},{featureType:"road",elementType:"labels.text.fill",stylers:[{color:"#9ca5b3"}]},{featureType:"road.highway",elementType:"geometry",stylers:[{color:"#746855"}]},{featureType:"road.highway",elementType:"geometry.stroke",stylers:[{color:"#1f2835"}]},{featureType:"road.highway",elementType:"labels.text.fill",stylers:[{color:"#f3d19c"}]},{featureType:"transit",elementType:"geometry",stylers:[{color:"#2f3948"}]},{featureType:"transit.station",elementType:"labels.text.fill",stylers:[{color:"#d59563"}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#17263c"}]},{featureType:"water",elementType:"labels.text.fill",stylers:[{color:"#515c6d"}]},{featureType:"water",elementType:"labels.text.stroke",stylers:[{color:"#17263c"}]}],V=[{featureType:"all",elementType:"labels.text.fill",stylers:[{saturation:36},{color:"#000000"},{lightness:40}]},{featureType:"all",elementType:"labels.text.stroke",stylers:[{visibility:"on"},{color:"#000000"},{lightness:16}]},{featureType:"all",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"administrative",elementType:"geometry.fill",stylers:[{color:"#000000"},{lightness:20}]},{featureType:"administrative",elementType:"geometry.stroke",stylers:[{color:"#000000"},{lightness:17},{weight:1.2}]},{featureType:"landscape",elementType:"geometry",stylers:[{color:"#000000"},{lightness:20}]},{featureType:"poi",elementType:"geometry",stylers:[{color:"#000000"},{lightness:21}]},{featureType:"road.highway",elementType:"geometry.fill",stylers:[{color:"#000000"},{lightness:17}]},{featureType:"road.highway",elementType:"geometry.stroke",stylers:[{color:"#000000"},{lightness:29},{weight:.2}]},{featureType:"road.arterial",elementType:"geometry",stylers:[{color:"#000000"},{lightness:18}]},{featureType:"road.local",elementType:"geometry",stylers:[{color:"#000000"},{lightness:16}]},{featureType:"transit",elementType:"geometry",stylers:[{color:"#000000"},{lightness:19}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#000000"},{lightness:17}]}],Z=[{featureType:"administrative.land_parcel",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"administrative.land_parcel",elementType:"geometry.stroke",stylers:[{visibility:"off"},{weight:7}]},{featureType:"administrative.locality",elementType:"geometry.stroke",stylers:[{visibility:"on"}]},{featureType:"administrative.locality",elementType:"labels.text.fill",stylers:[{visibility:"on"}]},{featureType:"administrative.locality",elementType:"labels.text.stroke",stylers:[{visibility:"on"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",elementType:"geometry.fill",stylers:[{color:"#00ff28"},{visibility:"on"},{weight:2}]},{featureType:"administrative.neighborhood",elementType:"geometry.stroke",stylers:[{color:"#00ff28"},{visibility:"on"}]},{featureType:"administrative.neighborhood",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",elementType:"labels.text.stroke",stylers:[{visibility:"off"}]},{featureType:"landscape.natural",elementType:"geometry.fill",stylers:[{visibility:"on"}]},{featureType:"poi",elementType:"labels.text",stylers:[{visibility:"off"}]},{featureType:"poi.attraction",stylers:[{visibility:"off"}]},{featureType:"poi.business",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"poi.medical",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"poi.place_of_worship",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"poi.school",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"poi.sports_complex",elementType:"geometry.fill",stylers:[{visibility:"on"}]},{featureType:"poi.sports_complex",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"road",elementType:"labels.text",stylers:[{visibility:"on"},{lightness:-10},{color:"#b5b5b5"},{weight:.2}]},{featureType:"road",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"road.local",elementType:"geometry.fill",stylers:[{color:"#fbfbfb"},{lightness:-15},{weight:.5}]},{featureType:"road.local",elementType:"geometry.stroke",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"all",stylers:[{visibility:"off"}]},{featureType:"transit.station",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"water",elementType:"labels.text",stylers:[{visibility:"off"}]}],A=[{elementType:"geometry",stylers:[{color:"#ebe3cd"}]},{elementType:"labels.text.fill",stylers:[{color:"#523735"}]},{elementType:"labels.text.stroke",stylers:[{color:"#f5f1e6"}]},{featureType:"administrative",elementType:"geometry.stroke",stylers:[{color:"#c9b2a6"}]},{featureType:"administrative.land_parcel",elementType:"geometry.stroke",stylers:[{color:"#dcd2be"}]},{featureType:"administrative.land_parcel",elementType:"labels.text.fill",stylers:[{color:"#ae9e90"}]},{featureType:"landscape.natural",elementType:"geometry",stylers:[{color:"#dfd2ae"}]},{featureType:"poi",elementType:"geometry",stylers:[{color:"#dfd2ae"}]},{featureType:"poi",elementType:"labels.text.fill",stylers:[{color:"#93817c"}]},{featureType:"poi.park",elementType:"geometry.fill",stylers:[{color:"#a5b076"}]},{featureType:"poi.park",elementType:"labels.text.fill",stylers:[{color:"#447530"}]},{featureType:"road",elementType:"geometry",stylers:[{color:"#f5f1e6"}]},{featureType:"road.arterial",elementType:"geometry",stylers:[{color:"#fdfcf8"}]},{featureType:"road.highway",elementType:"geometry",stylers:[{color:"#f8c967"}]},{featureType:"road.highway",elementType:"geometry.stroke",stylers:[{color:"#e9bc62"}]},{featureType:"road.highway.controlled_access",elementType:"geometry",stylers:[{color:"#e98d58"}]},{featureType:"road.highway.controlled_access",elementType:"geometry.stroke",stylers:[{color:"#db8555"}]},{featureType:"road.local",elementType:"labels.text.fill",stylers:[{color:"#806b63"}]},{featureType:"transit.line",elementType:"geometry",stylers:[{color:"#dfd2ae"}]},{featureType:"transit.line",elementType:"labels.text.fill",stylers:[{color:"#8f7d77"}]},{featureType:"transit.line",elementType:"labels.text.stroke",stylers:[{color:"#ebe3cd"}]},{featureType:"transit.station",elementType:"geometry",stylers:[{color:"#dfd2ae"}]},{featureType:"water",elementType:"geometry.fill",stylers:[{color:"#b9d3c2"}]},{featureType:"water",elementType:"labels.text.fill",stylers:[{color:"#92998d"}]}],R=[{featureType:"all",elementType:"labels",stylers:[{visibility:"on"}]},{featureType:"all",elementType:"labels.text.fill",stylers:[{saturation:36},{color:"#000000"},{lightness:40}]},{featureType:"all",elementType:"labels.text.stroke",stylers:[{visibility:"on"},{color:"#000000"},{lightness:16}]},{featureType:"all",elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"administrative",elementType:"geometry.fill",stylers:[{color:"#000000"},{lightness:20}]},{featureType:"administrative",elementType:"geometry.stroke",stylers:[{color:"#000000"},{lightness:17},{weight:1.2}]},{featureType:"administrative.country",elementType:"labels.text.fill",stylers:[{color:"#e5c163"}]},{featureType:"administrative.locality",elementType:"labels.text.fill",stylers:[{color:"#c4c4c4"}]},{featureType:"administrative.neighborhood",elementType:"labels.text.fill",stylers:[{color:"#e5c163"}]},{featureType:"landscape",elementType:"geometry",stylers:[{color:"#000000"},{lightness:20}]},{featureType:"poi",elementType:"geometry",stylers:[{color:"#000000"},{lightness:21},{visibility:"on"}]},{featureType:"poi.business",elementType:"geometry",stylers:[{visibility:"on"}]},{featureType:"road.highway",elementType:"geometry.fill",stylers:[{color:"#e5c163"},{lightness:0}]},{featureType:"road.highway",elementType:"geometry.stroke",stylers:[{visibility:"off"}]},{featureType:"road.highway",elementType:"labels.text.fill",stylers:[{color:"#ffffff"}]},{featureType:"road.highway",elementType:"labels.text.stroke",stylers:[{color:"#e5c163"}]},{featureType:"road.arterial",elementType:"geometry",stylers:[{color:"#000000"},{lightness:18}]},{featureType:"road.arterial",elementType:"geometry.fill",stylers:[{color:"#575757"}]},{featureType:"road.arterial",elementType:"labels.text.fill",stylers:[{color:"#ffffff"}]},{featureType:"road.arterial",elementType:"labels.text.stroke",stylers:[{color:"#2c2c2c"}]},{featureType:"road.local",elementType:"geometry",stylers:[{color:"#000000"},{lightness:16}]},{featureType:"road.local",elementType:"labels.text.fill",stylers:[{color:"#999999"}]},{featureType:"transit",elementType:"geometry",stylers:[{color:"#000000"},{lightness:19}]},{featureType:"water",elementType:"geometry",stylers:[{color:"#000000"},{lightness:17}]}],q=[...R,...Z],D=[{featureType:"water",elementType:"geometry",stylers:[{color:"#e9e9e9"},{lightness:17}]},{featureType:"landscape",elementType:"geometry",stylers:[{color:"#f5f5f5"},{lightness:20}]},{featureType:"road.highway",elementType:"geometry.fill",stylers:[{color:"#ffffff"},{lightness:17}]},{featureType:"road.highway",elementType:"geometry.stroke",stylers:[{color:"#ffffff"},{lightness:29},{weight:.2}]},{featureType:"road.arterial",elementType:"geometry",stylers:[{color:"#ffffff"},{lightness:18}]},{featureType:"road.local",elementType:"geometry",stylers:[{color:"#ffffff"},{lightness:16}]},{featureType:"poi",elementType:"geometry",stylers:[{color:"#f5f5f5"},{lightness:21}]},{featureType:"poi.park",elementType:"geometry",stylers:[{color:"#dedede"},{lightness:21}]},{elementType:"labels.text.stroke",stylers:[{visibility:"on"},{color:"#ffffff"},{lightness:16}]},{elementType:"labels.text.fill",stylers:[{saturation:36},{color:"#333333"},{lightness:40}]},{elementType:"labels.icon",stylers:[{visibility:"off"}]},{featureType:"transit",elementType:"geometry",stylers:[{color:"#f2f2f2"},{lightness:19}]},{featureType:"administrative",elementType:"geometry.fill",stylers:[{color:"#fefefe"},{lightness:20}]},{featureType:"administrative",elementType:"geometry.stroke",stylers:[{color:"#fefefe"},{lightness:17},{weight:1.2}]}];export{$ as Circle,M as CustomControl,P as GoogleMap,I as Marker,B as Polygon,z as Polyline,E as Rectangle,N as aubergine,L as dark,V as grey,Z as minimal,A as retro,R as roadways,q as roadwaysMinimal,D as ultraLight};
| 

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 3:0-44 6:15-24
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.

The latest vue3-google-map version that works for me is 0.7.1.

With version 0.7.2 my app also fails to build, but the reported error is different:

 ERROR  Failed to compile with 1 error                                                            4:04:32 PM

 error  in ./node_modules/vue3-google-map/dist/es/index.js

Module parse failed: Unexpected token (416:44)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                 fullscreenControlOptions: props.fullscreenControlPosition
|                     ? {
>                         position: api.value?.ControlPosition[props.fullscreenControlPosition],
|                     }
|                     : {},

 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js 3:0-44 6:15-24
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.

[HusamElbashir]

@JoseGoncalves Please share a reproduction link if possible. @ksnyde will look into it shortly.

[JoseGoncalves]

@HusamIbrahim and @ksnyde Please check my sample project at https://github.com/JoseGoncalves/vue-google-maps

[reslear]

same, on vue cli

[yankeeinlondon]

@HusamIbrahim have you fixed this in 07.6. @JoseGoncalves @reslear my apologies for not looking at this sooner but I am not using this repo at the moment haven't been able to pull myself away from some urgent issues elsewhere.

[yankeeinlondon]

@JoseGoncalves I am able to reproduce. I built your repo without issue using the 0.7.1 release but it fails with an unexpected token on 0.7.6.

[JoseGoncalves]

@ksnyde Yep, thats the issue. Anything above or equal 0.7.2 fails to build. And is not only when you build for production. Building for development, with npm run serve, it also fails.

[yankeeinlondon]

i'm looking at it now ... at first blush it appears to be the manner in which rollup is transpiling the following but i'm still mid-stream.

[HusamElbashir]

@HusamIbrahim have you fixed this in 07.6.

@ksnyde 0.7.6 was released prior to this issue being brought up.

[yankeeinlondon]

@JoseGoncalves @JamieMcDonnell I believe this problem is fixed in 0.7.7. @JoseGoncalves it definitely did work in the the test repo you provided. Let me know if you get it working and we'll close this.

[JoseGoncalves]

@ksnyde The missing token error is fixed!

Nevertheless, after I updated the dependencies in my demo project I got the following error:

Failed to resolve loader: @googlemaps/js-api-loader
You may need to install it.
 ERROR  Build failed with errors.

This can be fixed if I install @googlemaps/js-api-loader in my project, but I think a better solution is for you to set that package as a dependency of vue3-google-map (as it was set in 0.7.6) instead of a peer dependency.

[yankeeinlondon]

@JoseGoncalves in general an external API -- especially one from Google, who in my experience can be a bit crude with semver wrt typings (at least historically) -- is better externalized from library code which allows the consumer of this repo to upgrade the Google API as they please and not be tied to a version stated by this repo.

In the past, I would sometimes express this as an "optional dependency" rather than a "peer dependency" because all of the major package manager automatically install optional dependencies if the user hasn't explicitly added themself. It was my impression that this is now true for all package managers with peer dependencies too.

Indeed when I tried it on your demo repo where I used npm (which it appeared to be your preference based on the lock file), it all worked fine.

If you remove all files from _node_modules_ and run npm install you should find that @googlemaps is installed:

From there I ran npm run build which completed successfully:

And then I ran a simple HTTP server on top of the built static assets:

It then loads the map in the browser and because there's no API key it then reverts to the error message you'd expect in this case.

[yankeeinlondon]

How are you recreating your problem?

[JoseGoncalves]

I get the problem if I do;

npm run clean
rm package-lock.json
npm install --legacy-peer-deps
npm run build

[yankeeinlondon]

Yes this confirms what I was saying.

The --legacy-peer-deps flag was introduced with v7 as a way to bypass peerDependency auto-installation; it tells NPM to ignore peer deps and proceed with the installation anyway. This is how things used to be with NPM v4 thru v6.

This is typically not what people actually want and due the world being "weird" it was always implemented this way with optional dependencies and not peer dependencies but this has been corrected and made consistent across package managers so library authors don't have to be sneaky and put deps into optional deps when in fact they are genuine peer dependencies.

Now the question is @JoseGoncalves ... why are you using this flag? Typically you should not but if you are then you will need to ensure that you manually install peer dependencies that your dependencies require (this is almost by definition what this flag requires).

[yankeeinlondon]

As I mentioned earlier, having the Google dependencies listed as a peer dependency is not only more "correct" but provides users of this library more flexibility/freedom if they need it but no additional problems if they don't. If you're using the --legacy-peer-deps flag you are signing up for a greater responsibility to install peer dependencies explicitly but very few people need this or use this flag.

note: pushing the google dep into peer deps also promotes better tree-shaking and code reuse in cases where consumers of this library may have included the dependency themselves for other needs.

For these reasons I do not believe this an open issue. I am going to close but if you feel I should be handling this in a different way I am open to having that conversation here or in a different thread.

[JoseGoncalves]

@ksnyde I was using npm install --leagcy-peer-deps because standard install fails in my projects with the following error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: vue-google-maps@0.1.0
npm ERR! Found: eslint@7.26.0
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^7.26.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/cli-plugin-eslint@4.5.13
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR!   dev @vue/cli-plugin-eslint@"~4.5.13" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

This is due the usage of eslint 7 in my projects and vue-cli still uses v6. I managed to overcome my installation issue replacing --legacy-peer-deps with --force.

[yankeeinlondon]

I think for your needs --force is the correct flag. Not because of anything in this repo but rather that you're not actually interested in taking over the responsibility for peer dependencies as is expressed by --legacy-peer-deps but rather want to force a version onto one of your dependencies. Make sense?

[JamieMcDonnell]

Thanks for this guys, sorry I was away the past few weeks. I am using your lib in a Quasar project, but since updating to v 0.7.7 I now see the following when trying to run project:

TS7016: Could not find a declaration file for module 'vue3-google-map'. '/Users/jamiemcdonnell/Documents/GitHub/plenty-quasar/node_modules/vue3-google-map/dist/cjs/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/vue3-google-map` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue3-google-map';`
  > 182 | import { GoogleMap, Polygon } from 'vue3-google-map'
        |                                    ^^^^^^^^^^^^^^^^^

   Can this be added? Or should I fork and add it to my fork?

   Thanks in advance

   Jamie

[yankeeinlondon]

The types are now put into the dist/types directory rather than being bundled into the same directory as the es build but it would appear that it's offset the path due to the inclusion of both src and docs root directories. This should be a simple fix.

[yankeeinlondon]

I've release 0.7.8 which should fix this

[JamieMcDonnell]

Thanks, while that seems to have resolved the declaration, but the component type properties are still coming back as 'any'.

in my template I put a ref on my component, e.g::

<google-map ref="gmap" />

I import the lib:

import { GoogleMap } from 'vue3-google-map'

In setup I define the variable that refers to that ref and give it a type:

const gmap = Ref<typeof GoogleMap | null>()

and I export it to the template:

return {
  gmap
}

Within setup I create a computed ref to point to the map:

const map = computed(() => {
      if (gmap.value?.ready) { // .ready is an any value, not a boolean as it's type should suggest
        return gmap.value.map // also of 'any' type, not google.maps.Map as it's type should suggest
      } else {
        return null
      }
    })

Is this something I am doing wrongly?

Thanks so much ;)

[JamieMcDonnell]

I tried replacing the contents of GoogleMap.vue.d.ts with the following:

/// <reference types="googlemaps" />
import { PropType } from "vue";
import { IMap } from "../@types/index";
interface IGoogleMap {
  ready: boolean;
  map: google.maps.Map;
}
declare const _default: IGoogleMap;
export default _default;

But the imported GoogleMap object still shows a type of 'any"

(alias) const GoogleMap: any
import GoogleMap

[yankeeinlondon]

@JamieMcDonnell there was a typing error in GoogleMap that caused the .vue file to not export any typing information. I believe this was in there for a number of releases but that said, it's fixed now.

[JamieMcDonnell]

@ksnyde thanks this makes sense. I updated to 0.7.9 but the issue persists.

Any ideas?

[yankeeinlondon]

@JamieMcDonnell Take a look at the node_modules/vue3-google-map/dist/typings folder and see if you can see what's happening. I'm on the road now for a few days and won't have any time to look at this.

[yankeeinlondon]

It should look something like:

[yankeeinlondon]

Bear in mind, I am not using this library at all right now so I simply make sure it compiles and the documentation comes up and then call it a day right now.

[JamieMcDonnell]

ok no worries, I looked into it but could not find the issue. When I need to refer to the typing of a custom component, I follow these few steps: 1/ Move the script tag to a separate .ts file and refer to it in the src prop of the script tag of the template

2/ Import the .ts file for the component separately to the component itself, e.g:

import EquipmentPinMenu from 'components/Map/EquipmentPinMenu.vue'
import TEquipmentPinMenu from 'components/Map/TEquipmentPinMenu'

3/ declare the variable to contain the ref element as follows:

const CEquipmentPinMenu = ref<InstanceType<typeof TEquipmentPinMenu>>()

This variable is then exported in the setup method, and if I need access to it's props or exported methods, I simply call them with:

CEquipmentPinMenu.value.myMethod()

I tried to do this with your component by forking it, adding it to my package.json using yarn add path/to/fork, going into the node_packages folder node_packages/vue3-google-map and running npm install --force then npm run build but my app then throws a bunch of type erros relating to the google-map component and will not build ;(

I have added a simple interface for the google-map type to get past this at the moment:

export interface IGoogleMapComponent {
map: google.maps.Map;
ready: boolean;
}

It would be great if you could find the time to resolve this so the component can be used properly. I hope the above info helps. If you can help me to help you I'll be glad to, but my knowledge of Vue is a bit limited to this.

[yankeeinlondon]

I'm not sure about these steps but the best way is to look at the package.json and then find the "typings" or "types" export and then look at the typings. This is what I asked for. If you do as I mentioned I can tell you in 30 seconds what the issue is.

Please, just take a screenshot of the file I suggested. I have a million things to do and this library isn't one of them.

[JamieMcDonnell]

This is a screenshot of the @type dependencies in my package.json - there are no ""typings" or "types" export".

In your package.json: https://github.com/inocan-group/vue3-google-map/blob/develop/package.json

I see no ""typings" or "types" export". there either.

I noticed in dist/@types/index.d.ts you refer to this: /// but I see no reference to it in package.json

I understand your busy, apologies if I am wasting your time.

[yankeeinlondon]

no, i'm asking you to look in node_modules/dist/types/components/GoogleMap.vue.d.ts (see my screen shot). Your own package.json isn't going to tell you anything.

When troubleshooting type errors for a dependency which supplies its own types (aka, you don't need to install a separate @types/xxx ... you do this by looking at the dependencies package.json in node_modules and then look for the types or typings property in that file to point you to where the types are. I've saved you that trouble and just told you where to look.

I'm asking you to check this as I have no problems with the typings on my end but sometimes when I'm in a hurry I can release the npm release prior to the build having placed the types into the right place so you'll be able to identify this by giving me this screenshot.

[JamieMcDonnell]

thanks for clarifying and sorry for the confusion. Attached is the screenshot of node_modules/vue3-google-map/dist/types/components/GoogleMap.vue.d.ts

[yankeeinlondon]

Hmmmm. So it looks like the types are there. Can you expand on the issue you're having? You gave a snippet of the Vue ref assignment but what I'd like to see is where you're importing the GoogleMap symbol and whether or not that symbol has type information.