How to enable client-only components + imports

[alexcroox]

I'm trying to use leafletjs which only works on the client.

pages/maps/[mapName].vue

<template>
  <client-only>
    <Map :mapName="props.mapName" />
  </client-only>
</template>

map.vue

<script setup lang="ts">
import Leaflet from 'leaflet'

gives me the following error on build:

I'm coming from Nuxt 2 so maybe they do some magic I'm not aware of, but I thought wrapping a component in <client-only> meant the dependencies inside that component won't be evaluated during an SSR pass?

I've tried some work arounds with no success:

<script setup lang="ts">
let Leaflet

if (typeof window !== 'undefined') {
  Leaflet = await import('leaflet')
}

Also why is the build process generating SSR bundles, I thought this was an SSG library?

[alexcroox]

Fixed by doing the import inside onMounted

onMounted(async () => {
Leaflet = await import('leaflet')