inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
264 stars 50 forks source link

Does the library supports server side rendering? #188

Closed abdurrahmanseyidoglu closed 3 months ago

abdurrahmanseyidoglu commented 6 months ago

I'm trying to use it inside Vue3 SSR with inertia but I'm getting the following error on build

import { GoogleMap, InfoWindow, Marker, MarkerCluster } from "vue3-google-map";
         ^^^^^^^^^
SyntaxError: Named export 'GoogleMap' not found. The requested module 'vue3-google-map' is a CommonJ
S module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vue3-google-map';
const { GoogleMap, InfoWindow, Marker, MarkerCluster } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Node.js v18.18.2

this error only happens when building the application for SSR.

HusamElbashir commented 5 months ago

I'd say SSR was never a focus for this library and in any case you can only load the Google script on the client as far as I can tell. I'd say wrap your map with an async component or use whatever mechanism your framework provides to ensure your map is only loaded client side.

HusamElbashir commented 5 months ago

Hi

As a workaround you can add this to your vite.config.js.

ssr: {
  noExternal: ['vue3-google-map']
}

I'll hopefully release a fix for this in the coming days.

aKzenT commented 4 months ago

Is there an update on this issue? I'm seeing the same problem and would like to avoid the workarround if possible.

HusamElbashir commented 3 months ago

Fixed in v0.20.0