Importing GmapCustomMarker not working

[blaiddyd]

Hello!

I am trying to use a Vue component as a map marker on a Vue2 Gmap. I used the method described in the docs to import the feature but when I try to import it like so:

import GmapCustomMarker from 'vue2-gmap-custom-marker';

export default = {
  [...],
  components: {
      'gmap-custom-marker': GmapCustomMarker
  },
  [...]
}

I get a syntax error and my code is not able to compile. I tried to import it in the same way that the regular GmapMarker is imported:

import {GmapCustomMarker} from 'vue2-gmap-custom-marker';
Vue.component('GmapCustomMarker', GmapCustomMarker);

but the export was not found. Is there any other way I can successfully implement this on my project?

Thanks in advance!

[eregnier]

Hey !

Can you share your compilation error please ?
Your code implementation seems right to me. The bundling is not perfect and would benefit from a PR, but your code should work.

The only thing I think that may not work properly in your case is you may have missed the npm install vue2-gmap-custom-marker --save command so the package is not available locally.

Hope this helps, otherwise a stacktrace will sureley help me understand what is happening to your project.

[blaiddyd]

Works like a charm! Thank you so much! :) My mistake for not thinking about that!

[pribadi1st]

hi @eregnier , @ekinbukulmez i get the same issue with importing the plugin

the error is

[Vue warn]: Failed to resolve async component: () => __webpack_require__.e(/*! import() */ 14).then(__webpack_require__.bind(null, /*! @/views/my-views.vue */my-views.vue"))
Reason: SyntaxError: Unexpected token <

i used the latest version.
do you know why ?
thank you

[eregnier]

@pribadi1st I just retested the last version of the component on the gh-page branch and it seems to work properly. I think the error is on your side also no one else had this issue until now.

Your error looks like a bad configuration of your webpack that may not load .vue files properly. The hint is in your stack trace that the syntax error is encountered with the < character that this component uses for html markup.

If you can share some code, I may have a look.

[r29taheri]

hi @eregnier , @ekinbukulmez i get the same issue with importing the plugin

the error is

[Vue warn]: Failed to resolve async component: () => __webpack_require__.e(/*! import() */ 14).then(__webpack_require__.bind(null, /*! @/views/my-views.vue */my-views.vue"))
Reason: SyntaxError: Unexpected token <

i used the latest version.
do you know why ?
thank you

I have the same error in nuxt
Unexpected token <

[eregnier]

Hi @r29taheri ,

This issue is related to the parent project https://github.com/xkjyeah/vue-google-maps as the error that raises nuxt is an import error from ./components/infoWindow.vue. I cannot do anything for this issue into this project. To solve the issue, the vue google map project must be fixed to work with nuxt. however, it does not evolve a lot as it's author have no time for it.

I had a look at what I can do by setuping a new nuxt project with this plugin, and I had the same issue. However, I did not find any workaround for it. I also am not sure to well understand the issue as it is nuxt related, and I do not master it.

You may follow changes in the vue gmap project, or have a deeper look at the issues in it where maybe someone found a solution. You also may try to fix the issue once for all, what would be great for both projects :) .

I wish you good luck and I am sorry to not be able to help you more at the moment for this case.

Regards.

[pniedzwiedzinski]

I have the same error in nuxt
Unexpected token <

I had the same error and this worked for me:

//nuxt.config.json

  [...]

  build: {
    transpile: [/^vue2-google-maps($|\/)/, /^vue2-gmap-custom-marker($|\/)/]
  }

  [...]

I'm posting it because I couldn't find a solution for this anywhere.

[eregnier]

Hey @pniedzwiedzinski, thank you for your time and sharing the information! I hope this will help.

[eliecer2000]

I have the same error in nuxt
Unexpected token <

I had the same error and this worked for me:

//nuxt.config.json

  [...]

  build: {
    transpile: [/^vue2-google-maps($|\/)/, /^vue2-gmap-custom-marker($|\/)/]
  }

  [...]

I'm posting it because I couldn't find a solution for this anywhere.

this worked for me, thanks

[sgarner]

I encountered a related issue using this module with Nuxt. We were using the above transpile config fine before, but after updating to @nuxt/typescript-runtime v1.0.0 and @nuxt/typescript-build v2.0.0, started getting a build error saying the module could not be found:

TS2307: Cannot find module 'vue2-gmap-custom-marker' or its corresponding type declarations.

The solution was to import the component from the vue file path directly:

import GmapCustomMarker from 'vue2-gmap-custom-marker/gmap-custom-marker.vue'; // works 🎉

instead of from the package index:

import GmapCustomMarker from 'vue2-gmap-custom-marker'; // stopped working ❌

[eregnier]

Hey @sgarner ,

There was no recent changes on index.js which is this plugin entry point that just loads the .vue file for you.
I think you have a regression due to the updated behavior of your nuxt/typescript toolchain.

On the other hand, this module packaging system is almost non existent and pretty raw, as I never needed one and there was no complaints about it among users. Except for Nuxt users that seems to have a workaround.

Let me know If we have some suggestion to improve things.

[ChristianBielak]

I have the same error in nuxt
Unexpected token <

I had the same error and this worked for me:

//nuxt.config.json

  [...]

  build: {
    transpile: [/^vue2-google-maps($|\/)/, /^vue2-gmap-custom-marker($|\/)/]
  }

  [...]

I'm posting it because I couldn't find a solution for this anywhere.

this worked for me, thanks

This didn't work for me, but i was able to solve this issue with registering the component in a nuxt.js plugin.

[thanhchuongbmd]

I have the same error in nuxt
Unexpected token <

I had the same error and this worked for me:

//nuxt.config.json

  [...]

  build: {
    transpile: [/^vue2-google-maps($|\/)/, /^vue2-gmap-custom-marker($|\/)/]
  }

  [...]

I'm posting it because I couldn't find a solution for this anywhere.

this worked for me, thanks

This didn't work for me, but i was able to solve this issue with registering the component in a nuxt.js plugin.

the same

[dataexcess]

I have the same error in nuxt
Unexpected token <

I had the same error and this worked for me:

//nuxt.config.json

  [...]

  build: {
    transpile: [/^vue2-google-maps($|\/)/, /^vue2-gmap-custom-marker($|\/)/]
  }

  [...]

I'm posting it because I couldn't find a solution for this anywhere.

this worked for me, thanks

This didn't work for me, but i was able to solve this issue with registering the component in a nuxt.js plugin.

the same

Could you please give exact steps for this?
I tried: making a js file in the nuxt /plugins folder called 'google-maps-marker.js' with the following code:

import Vue from "vue";
import GmapCustomMarker from 'vue2-gmap-custom-marker';

Vue.use(GmapCustomMarker);

I then used this plugin in my nuxt.config.js file like so:

  plugins: [
    { src: "~/plugins/google-maps", ssr: true },
    { src: "~/plugins/google-maps-marker", ssr: true }
  ],
  build: {
    transpile: [/^vue2-google-maps($|\/)/, /^vue2-gmap-custom-marker($|\/)/]
  }

However I still get the same error

SyntaxError
Unexpected token '<'

Please help!

[eregnier]

If you still have the error, It must be that the transpile directive is not properly used.

1. use npm to install the custom marker package

2. load the vue file as described by @sgarner . it should look like :

import GmapCustomMarker from 'vue2-gmap-custom-marker/gmap-custom-marker.vue';

3. double / triple check that your transpile custom setting is properly used using nuxt.

Does this solve your issue ?

[dataexcess]

If you still have the error, It must be that the transpile directive is not properly used.

1. use npm to install the custom marker package
2. load the vue file as described by @sgarner . it should look like :

import GmapCustomMarker from 'vue2-gmap-custom-marker/gmap-custom-marker.vue';

1. double / triple check that your transpile custom setting is properly used using nuxt.

Does this solve your issue ?

Thank you for the help,

but no, importing the package by appending "/gmap-custom-marker.vue" doesn't change anything...
As for point 3, what do you mean? Why should it not work? I am just using the nuxt.config.file as explained before.
How can I even double check this? I have no idea sorry.

Thank you

[dataexcess]

Ok I found the issue :)
For anyone struggeling with this - it is important that you use the plugin on the client side only!

  plugins: [
    { src: "~/plugins/google-maps.js", ssr: true },
    { src: "~/plugins/google-maps-marker.js", mode: 'client' }
  ],

🎉

[dataexcess]

I was a bit too fast.
This did solve issues for the plugin ( I can build my app with the plugin connected),
However when I need to use the plugin in code, I still need to specifiy it as a component in my .vue file
and then I again need to use the import statement which again throws the same error...

😭

[dataexcess]

Luckily I found it again! So for any nuxt.js noobs out there.
Just use .component instead of .use in your plugin (duh)

import Vue from "vue";
import GmapCustomMarker from 'vue2-gmap-custom-marker';

Vue.component('GmapCustomMarker', GmapCustomMarker)

🎉

[eregnier]

Thank you for sharing.
Note that your issue is more raw vue issue more than nuxt specific.
Also note that in this project's readme it is described to load the component with an import statement and then use it locally in the current component "components" properties. But yes, the way you use this plugin should work :) .

[dataexcess]

Also note that in this project's readme it is described to load the component with an import statement and then use it locally in the current component "components" properties.

It is exactly this that is not working - specifically when using nuxt.js... ( at least in my case - I hope someone will prove me wrong )
So I think the issue actually is nuxt.js specific... when trying to import it and register using components inside a vue file it does not work... only when registering it as a global component I can use it inside a vue file (so no local import)