SSR window is not defined

[mbrandeis]

When trying to add the component vue2-leaflet to an SSR page I’m getting “window is not defined”

What are the recommended ways of handling a component that is not SSR-friendly?

I can import the library, but when I add it to the components {} list it generates the error “window is not defined”. Fine, it needs to run on the client. But how can I tell quasar to not try to render it on the server and have it render on the client.

[mbrandeis]

For anyone following this thread, the q-no-ssr documentation doesn’t show a realistic example (who would use q-no-ssr to not render an H1 tag on the server?)

I found the best solution was to create a component for my troublesome package and put that component in q-no-ssr, AND THEN adding a javascript check in the component (not the page) to see if it is running on the server like this:

<script>
let Vue2Leaflet = {}

if (!process.env.SERVER) {
  console.log('loading vue2-leaflet')
  Vue2Leaflet = require('vue2-leaflet')
}
export default {
  name: 'CampaignMap',
  components: {
    'l-map': Vue2Leaflet.LMap,
    'l-tile-layer': Vue2Leaflet.LTileLayer,
    'l-marker': Vue2Leaflet.LMarker
  },
....

[rstoenescu]

@mbrandeis who would use q-no-ssr to not render an H1 tag on the server? :))
Should it should use an example with H2 instead? Leaving jokes aside, isn’t the documentation supposed to offer the concept of QNoSsr? Who cares what the QNoSsr example nodes contain? The concept matters.

Small tip: you can use process.env.CLIENT to avoid the unnecessary negation on process.env.SERVER.

[mbrandeis]

@rstoenescu You’re right - the tag doesn’t matter. The real issue I had was that the case of code that doesn’t work with QNoSsr and needing to use process.env.CLIENT is not documented.