web-dev-qa-db-ja.com

Nuxt.jsの「ドキュメントが定義されていません」

Vueコンポーネント内で Choices.js を使用しようとしています。コンポーネントは正常にコンパイルされますが、エラーがトリガーされます。

[vue-router]非同期コンポーネントのデフォルトの解決に失敗しました：ReferenceError：ドキュメントが定義されていません

私が見るブラウザで：

ReferenceErrorドキュメントが定義されていません

これはNuxt.jsのSSRと関係があると思いますか？ Choices.jsは、クライアント上で実行するために必要なだけです。これは、私が推測するのはクライアントのみの側面だからです。

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>

クラシックVueでは、これで問題なく動作するので、Nuxt.jsをこのように動作させる方法については、まだ十分に理解できていません。

私が間違っているところはありますか？

ありがとう。

javascriptvue.jsvuejs2nuxt.js
6
Michael Giovanni Pumo

Nuxtプロジェクトを開始するときによくあるエラーです;-)

Choices.jslibはクライアント側でのみ使用できます！したがって、Nuxtはサーバー側からレンダラーを試みましたが、Node.jsからwindow.documentが存在しない場合、エラーが発生します。
nb：window.documentは、ブラウザレンダラからのみ使用できます。

Nuxt 1.0.0 RC7 なので、<no-ssr>要素を使用して、コンポーネントをクライアント側のみに許可できます。

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

ここで公式の例を見てください： https://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue

17
Nicolas Pennec

正解は正解でしたが、短すぎて理解して正しく使用できなかったため、より詳細なバージョンを作成しました。 plotly.js + nuxt.jsを使用する方法を探していましたが、それはOPの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

No-ssrがに置き換えられたことがわかりました。私はechartを使用しており、同じ問題がありますが、今は機能しています！

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

プラグインとして追加し、SSRを無効にする必要があります。

ドキュメントとウィンドウがサーバー側で定義されていないため。

Nuxt.config.jsは以下のようになります。

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>

私はこれが役立つはずだと思います、nuxtはサーバー上でレンダリングされた後、計算された内部に触れ、ウィンドウが定義されます

0
Puwka