Nuxt.jsでmiddleware内でモジュールimportするとエラー

Question

Nuxt.jsのmiddlewareでモジュールimportをするとローカルでアプリが立ち上がりません。
なにがいけないのでしょうか？

実行手順は以下です。

1. スターターテンプレートを使って、シンプルアプリを作る

手順：[https://ja.nuxtjs.org/guide/installation]
2. nuxt.config.js内にmiddlewareの指定を追加(auth.js)
router: { middleware: 'auth'}
3. auth.js内でaws-amilfyをimportする
import { Auth } from 'aws-amplify'
4. npm run devするとエラー
エラー内容

    at /Users/hoge/dev/nuxt-app-sample/node_modules/vue-router/dist/vue-router.common.js```

Answer 1

SSRについてあまり詳しくないのですが、SSR時にライブラリがwindowなどを使用しているとエラーが起きるようなのでドキュメント(https://ja.nuxtjs.org/faq/window-document-undefined/)の通り対応する必要があるようです。

if (process.browser) {
  // windowなどの処理
}

nuxt.config.js

build: {
  vendor: ['ライブラリ']
}

なお、nuxt.config.jsで mode: 'spa' の場合はエラーが発生しません。

Comments

[risamiya]

ありがとうございます。
ただ処理分けというか、そもそもimportしただけで（処理は何も書いてない状態で）エラーなんです。

[thori]

auth.js内のimportを下記のようにrequireに書き換えてみてはいかがでしょうか

let Auth
if (process.browser) {
Auth = require('aws-amplify')
}

[thori]

補足しますと、自分で書いている処理ではなく、importしているライブラリ自体が中でwindowを使用しているためにエラーが発生しているのではないでしょうか。