search

AlexLavoie42 / Nuxt-Mapbox

Elegant Mapbox integration with Nuxt
81 stars 11 forks source link

Fix custom geocoder async import #61

Closed ElvisGmz closed 1 year ago

AlexLavoie42 commented 1 year ago

Could you describe what issue this is meant to fix? Originally the import happened on mount, however I changed it to avoid not displaying the geocoder for a while after the page has loaded.

ElvisGmz commented 1 year ago

Hello! Sure, the problem is when the project run in production, the console show error 500 for times and crash when i reload the site

this is the log message [nitro] [unhandledRejection] [[vite-node] [ERR_LOAD_URL] https:/api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js

This error is fixed when i add the import like in my PR

AlexLavoie42 commented 1 year ago

The ERR_LOAD_URL and the fact that the url is missing a / (https:/api.mapbox) in the error this seems like a problem with the url. Would you be able to provide more info about your environment like your nuxt-mapbox & nuxt version?

Also does this only happen in production but not in dev? Maybe it is some kind of issue with the build? I would rather try and fix the root cause since moving the import to onMounted significantly impacts the UX since the geocoder will not be loaded until well after all components are mounted. Worst case I had originally used onBeforeMount instead which is slightly better. If you are able to reproduce the issue in stackblitz as well that would help greatly.

ElvisGmz commented 1 year ago

Sure i use nuxt 3.6.5 with vue 3 and deployed in vercel The error ocurred in localhost too, without crash but console show the same error

AlexLavoie42 commented 1 year ago

~~If you visit the playground and go to /geocode you can see an example of the geocoder working. Would you be able to try and reproduce what is happening on your environment there? The easiest way to do this is usually to copy small parts of your project over (removing any sensitive info) until the issue appears.~~

Also, are you using the latest version of the module? (v1.4.3)

Nevermind, the geocoder loads but I see the same error in the console. I will investigate

AlexLavoie42 commented 1 year ago

So the issue is coming from the import running on the server side when it should only be loaded on the client side. This can be simply fixed by doing if (process.client) before the import. I will update the PR and merge.

Thank you for contributing and bringing the issue to my attention!

ElvisGmz commented 1 year ago

Thank you very much @AlexLavoie42 🫡🎉