Nuxt avoid import of client-side script for server-side rendering

Question

In my nuxt.js application, I have a script that imports an NPM package which is only compatible with browser contexts (it references document, location, window, etc.)

Is there a way to exclude this from SSR?

import thing from "@vendor/thing"; // causes `document not defined` error
export default showThing(){
 if (process.client) {
    thing();
 }
}

I can use the method with process.client but this file is still imported in my components.

Answer 1

You could import it dynamically rather than in every context.

As explained in my answer here: https://stackoverflow.com/a/67825061/8816585

In your example, that would be something like this

export default showThing(){
  if (process.client) {
    const thing = await import('@vendor/thing')
    thing()
  }
}