Méthode Nuxt pour éviter d'importer des scripts côté client lors du rendu côté serveur

Question

Dans mon application nuxt.js, j'ai un script qui importe les packages NPM qui ne sont compatibles qu'avec le contexte du navigateur (il fait référence à document、location、window etc.)

Existe-t-il un moyen de l'exclure de la RSS ?

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

Je peux utiliser la méthode process.client mais le fichier est toujours importé dans mon composant.

Answer 1

Vous pouvez l'importer dynamiquement au lieu de l'importer dans tous les contextes.

Comme expliqué dans ma réponse ici : https://stackoverflow.com/a/67825061/8816585

Dans votre exemple, cela ressemblerait à ceci

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