Taku’s Teckブログ

Teckはわざとです。

【学習メモ】Nuxt.jsビギナーズガイド  〜ログイン機能の実装①〜

バックエンドメインでしたが、最近はNuxt/TypeScriptで作られてフロントも触ることも多くなり、 体系的な知識不足を感じたのでNuxt.jsビギナーズガイドを先週あたりからやっている。

CHAPTER4の中規模以上の開発を意識した〜の認証機能の実装部分を。

テキストを見ながら写経をしていたところ、ずっとこのエラーが。 f:id:taku-exs:20200608221013p:plain 'export'と書いているところを調べてもexport defaultとデフォルトのエクスポートを宣言している以外は特になし。

何度Kindleを見返してもわからず、サンプルコードを見てどこが違うか見比べて見てタイポは多少見つけたものの、 エラーの原因ではない箇所。

app/store/index.js

export const store = () => ({
  isLoggedIn: false,
  user: null
})

(なぜここでstoreを宣言。。stateでした。)

そもそも原因である「Unexpected token 'export'」の意味がよくわからないので、エラーメッセージでググるといくつかヒット。

Qiitaの以下記事を見て、この通りに対応すると解消 https://qiita.com/kozakura16/items/5cae173bcdc0dff7f9a7

nuxt.config.js (修正前)

plugins: [
  '@/plugins/element-ui',
  '@/plugins/vue-notifications',
],

(修正後)

plugins: [
  { src: '@/plugins/element-ui', ssr: false }
],

SSR(mode: 'universal'時)、SSRをサポートしていないプラグインを追加するとエラーとなるため、明示的に ssr: falseとしてあげる必要がある模様。

 →本に指定がなかったかチェックしたところ、サンプルではこの記載をしてないので変わった?   TODO: プロジェクトを新規作成時の選択肢もサンプルと異なっていたので、どう変わったか調べて見たい。

プロジェクト作った時も、

const pkg = require('./package')

module.exports =

はなかった。

export default {
  mode: 'universal',
  srcDir: 'app',
  router: {
    middleware: [
      'auth-cookie'
    ]
  },
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

その前にnotifyがないと行ったエラーになるのでpluginsにvue-notifications追加で記載したが、 本にはelement-uiをインポートしていれば使えるという記述があり、確かに消しても使えたので、ここの読み込みが失敗していたのだと気づく。

 →TODO: element-uiについてもあとで調べる

これでサーバー起動することはできたが、登録に失敗するため、引き続きどこがおかしいか調べる。。 TODO: まずはconsole.log仕込んでどのようなエラーになっているかから。