Vue2-Google-Maps

[ShadowsBeneaths]

I am currently experiencing an issue with this setup. I am trying to using vue2-google-maps to use goolemaps auto-fill as well as maps. unfortunately, when I include the npm package as the documentation says and launch the application, I am getting the following error (one of the five error I am getting (all the same)):

ERROR in .//vue2-google-maps/dist/components/infoWindow.vue
Module parse failed: F:\location\projectFolder\ProjectName\node_modules\vue2-google-maps\dist\components\infoWindow.vue Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| /* vim: set softtabstop=2 shiftwidth=2 expandtab : */
|
|
|

|

@ .//vue2-google-maps/dist/main.js 42:18-56
@ ./ClientApp/app.js
@ ./ClientApp/boot-app.js
@ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot-app.js

At first I though it was something related to the webpack, since it is unable to load the .vue files that are in node_modules. I still am unable to figure this error out. I tried a normal vue init webpack project and it worked fine. When adding it to my main project (vuejs aspnet starter), the project no longer work as expected.

Does anyone have an idea of what could be happening ? I have attached the test project in here.

https://github.com/ShadowsBeneaths/Google-maps-vuejs-aspnet

[ShadowsBeneaths]

Temporary work around, copy and paste the entire node_modules/vue2-google-maps under clientapp/components

Not the best way to approach this, but that's the only thing I found. If anyone knows how to fix the above mentioned issue, please let me know!

Thanks in advance!

[Nordes]

Hi,

Your imports seems wrong. Otherwise, since the module from google-map might be already pre-compiled (who knows), then you should add it within the vendor configuration within webpack config file.

Please look and try to add it like the other vendors vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'vue', 'vuex', 'axios', 'vue-router', 'jquery']. The issue might be resolved by doing that.

Note: I haven't tried the plugin since I never used it, but if you have a simple sample of how you're integrating it (source code) it would help to understand what was your issue.