web-dev-qa-db-fra.com

"le document n'est pas défini" dans Nuxt.js

J'essaie d'utiliser Choices.js dans un composant Vue. Le composant se compile avec succès, mais une erreur est déclenchée:

[vue-router] Impossible de résoudre la valeur par défaut du composant asynchrone: ReferenceError: le document n'est pas défini

Dans le navigateur, je vois:

Le document ReferenceError n'est pas défini

Je pense que cela a quelque chose à voir avec la SSR dans Nuxt.js? J'ai seulement besoin de Choices.js pour fonctionner sur le client, car c'est un aspect uniquement client, je suppose.

nuxt.config.js 

build: {
  vendor: ['choices.js']
}

AppCountrySelect.vue 

<script>
import Choices from 'choices.js'

export default {
  name: 'CountrySelect',
  created () {
    console.log(this.$refs, Choices)
    const choices = new Choices(this.$refs.select)
    console.log(choices)
  }
}
</script>

Dans Vue classique, cela fonctionnerait bien, donc je suis toujours en train de comprendre comment je peux faire fonctionner Nuxt.js de cette façon.

Des idées où je me trompe?

Merci.

javascriptvue.jsvuejs2nuxt.js
6
Michael Giovanni Pumo

C'est une erreur courante lorsque vous démarrez un projet Nuxt ;-)

La bibliothèque Choices.js est disponible uniquement côté client! Nuxt a donc essayé de rendre le rendu côté serveur, mais à partir de Node.js window.document n'existe pas, alors vous avez une erreur.
nb: window.document n'est disponible que depuis le rendu du navigateur.

Depuis Nuxt 1.0.0 RC7 , vous pouvez utiliser <no-ssr> élément pour autoriser votre composant uniquement côté client.

<template>
  <div>
    <no-ssr placeholder="loading...">
      <your-component>
    </no-ssr>
  </div>
</template>

jetez un oeil à l'exemple officiel ici: https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue

17
Nicolas Pennec

La réponse acceptée (bien que correcte) était trop courte pour que je puisse la comprendre et l'utiliser correctement, j'ai donc écrit une version plus détaillée. Je cherchais un moyen d'utiliser plotly.js + nuxt.js, mais cela devrait être le même que le problème OP de Choice.js + nuxt.js.

MyComponent.vue

<template>
  <div>
    <no-ssr>
      <my-chart></my-chart>
    </no-ssr>
  </div>
</template>
<script>
export default {
  components: {
    // this different (webpack) import did the trick together with <no-ssr>:
    'my-chart': () => import('@/components/MyChart.vue')
  }
}
</script>

MyChart.vue

<template>
  <div>
  </div>
</template>
<script>
import Plotly from 'plotly.js/dist/plotly'
export default {
  mounted () {
    // exists only on client:
    console.log(Plotly)
  },
  components: {
    Plotly
  }
}
</script>
14
Michal Skop

J'ai trouvé que maintenant le no-ssr est remplacé par, j'utilise echart et j'ai le même problème mais maintenant ça marche!

    <client-only>
        <chart-component></chart-component>
    </client-only>
3
Mariel Quezada

Vous devez l'ajouter en tant que plugin, puis désactiver la SSR pour cela.

Comme le document et la fenêtre ne sont pas définis côté serveur.

Votre nuxt.config.js devrait ressembler à ci-dessous

plugins: [
{ src: '~/plugins/choices.js', ssr: false }
],
1
Yusuf Adeyemo
<script>
import Choices from 'choices.js'

export default {
  name: 'CountrySelect',
  created () {
    if(process.client) {
      console.log(this.$refs, Choices)
      const choices = new Choices(this.$refs.select)
      console.log(choices)
    }
  }
}
</script>

Je suppose que cela devrait aider, nuxt touchera l'intérieur du calcul après son rendu sur le serveur et la fenêtre sera définie

0
Puwka