Nuxt 3 - Server Side Rendering / Client Only - 500 Element Is Not Defined

[colpittJack]

Hi all,

I'm trying to get a Nuxt 3 / ArcGIS Maps SDK application off the ground, but having a hard time getting the Map.vue component to render as a <ClientOnly><Map /></ ClientOnly> with server side rendering functioning for the rest of the app. I'm getting the error 500 element is not defined. I've tried to match the example configs from the esri github repo, but its written in Nuxt 2, and doesn't seem to work. My app will work if you set 'ssr: false' in nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    'vuetify-nuxt-module'
  ],
  css: ['~/assets/css/main.css'],
  build: {
    transpile: ['@arcgis/core']
  },
  // Uncomment to get app to work
  // ssr: false,
});

The repo for my boilerplate project is attached here. If anyone has some time to look over the code and let me know where the map rendering is breaking that would be a huge help. I would also be happy to add more information here about anything if need be.

Thanks,

Jack

[ReneRubalcava · Accepted solution]

SSR and these "client" renderers are a little odd in some frameworks. So yes, those client components are rendered, but in some cases they are still loaded during ssr. I think Nuxt will automatically load js, even if not rendered from "components" folders. Looks like there are some tricks around this, but I always default to dynamic loading. This will work in your case.

const BASEMAP = "topo-vector";

export async function initialize(container: HTMLDivElement) {
  const [{ default: Map }, { default: MapView }, { default: Home }] =
    await Promise.all([
      import("@arcgis/core/Map"),
      import("@arcgis/core/views/MapView"),
      import("@arcgis/core/widgets/Home"),
    ]);

  const map = new Map({
    basemap: BASEMAP,
    // layers: [landGroup]
  });

  const view = new MapView({
    map,
    container,
    zoom: 10,
    center: [-120.8345, 44.2998],
    popupEnabled: true,
    popup: {
      dockEnabled: true,
      dockOptions: {
        // dock popup at bottom-right side of view
        buttonEnabled: true,
        breakpoint: true,
        position: "bottom-right",
      },
    },
  });

  const homeWidget = new Home({
    view: view,
  });

  view.ui.add(homeWidget, "top-left");

  await view.when();
  return view.when();
}

[colpittJack]

Thanks for taking the time to look this over. It works just like you mentioned. Much appreciated!