topic Nuxt 3 - Server Side Rendering / Client Only - 500 Element Is Not Defined in ArcGIS JavaScript Maps SDK Questions

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

colpittJack — Fri, 10 Nov 2023 04:10:02 GMT

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

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

ReneRubalcava — Sat, 11 Nov 2023 16:14:25 GMT

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.

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

colpittJack — Sat, 11 Nov 2023 23:12:41 GMT

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