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.

Also, if your package could be used locally, do that rather than loading it globally. As explained here: stackoverflow.com/a/67751550/8816585 — kissu
– kissu, Commented Jul 22, 2022 at 20:21

kissu · Accepted Answer · 2022-07-22 20:03:33Z

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()
  }
}

answered Jul 22, 2022 at 20:03

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

payam_sbr Over a year ago

i think there would be problems after the build.

kissu Over a year ago

@payam_sbr why would it? Should be all good.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related