Comments (21)
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
from vue2-gmap-custom-marker.
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.
from vue2-gmap-custom-marker.
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' }
],
🎉
from vue2-gmap-custom-marker.
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)
🎉
from vue2-gmap-custom-marker.
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.
from vue2-gmap-custom-marker.
Works like a charm! Thank you so much! :) My mistake for not thinking about that!
from vue2-gmap-custom-marker.
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
from vue2-gmap-custom-marker.
@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.
from vue2-gmap-custom-marker.
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 <
from vue2-gmap-custom-marker.
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.
from vue2-gmap-custom-marker.
Hey @pniedzwiedzinski, thank you for your time and sharing the information! I hope this will help.
from vue2-gmap-custom-marker.
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 ❌
from vue2-gmap-custom-marker.
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.
from vue2-gmap-custom-marker.
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.
from vue2-gmap-custom-marker.
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
from vue2-gmap-custom-marker.
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!
from vue2-gmap-custom-marker.
If you still have the error, It must be that the transpile directive is not properly used.
-
use npm to install the custom marker package
-
load the vue file as described by @sgarner . it should look like :
import GmapCustomMarker from 'vue2-gmap-custom-marker/gmap-custom-marker.vue';
- double / triple check that your transpile custom setting is properly used using nuxt.
Does this solve your issue ?
from vue2-gmap-custom-marker.
If you still have the error, It must be that the transpile directive is not properly used.
- use npm to install the custom marker package
- load the vue file as described by @sgarner . it should look like :
import GmapCustomMarker from 'vue2-gmap-custom-marker/gmap-custom-marker.vue';
- 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
from vue2-gmap-custom-marker.
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...
😭
from vue2-gmap-custom-marker.
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 :) .
from vue2-gmap-custom-marker.
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)
from vue2-gmap-custom-marker.
Related Issues (20)
- Marker offsets completely off with new latest update HOT 2
- The custom marker doesn't display in the exact LatLng HOT 1
- Other google maps items getting activated on click. HOT 1
- Render 4k marker on map with cluster HOT 4
- zIndex HOT 4
- HotFix: typeerror: cannot read property 'repaint' of undefined at vuecomponent.zindex HOT 2
- vue-google-maps is no longer maintained HOT 6
- Can not using gmap custom maker in nuxt 2.0 typescript HOT 1
- Rotate Marker HOT 2
- GmapInfoWindow does not work HOT 3
- How to animate gmap custom marker
- [Feature request] How to animation gmap customer marker HOT 9
- Cluster image dont work HOT 2
- How to drag the marker? HOT 2
- How to get extra info in a cluster HOT 3
- Custom marker popup going off screen HOT 2
- Making this library for vue3-google-map HOT 4
- incompatibility with [email protected] cluster and custom marker HOT 5
- Displaced markers on page change in Nuxt HOT 3
- ERROR in ./node_modules/vue2-gmap-custom-marker/node_modules/gmap-vue/dist/main.js HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue2-gmap-custom-marker.