Nuxt.js 2.0.0の実行方法

目次

概要

用語

事前準備（前提とする環境）

手順

概要

Nuxt.js 2.0.0がリリースされたので、スターターテンプレートを動作させてみたメモです。 その中で、「TypeError: Cannot read property 'eslint' of undefined」が発生したのでその対処方法も記載します。

用語

Nuxt.js：Vue.jsをより開発しやすくするためのフレームワーク

事前準備（前提とする環境）

Ubuntu 18.04(Virtual Boxに構築)（Python3.5.2含）

手順

基本的には、Nuxt.jsの公式に記載しているとおりの手順でインストールし、スターターテンプレートを実行するように準備します。

まずは、Nuxt.jsインストールの事前準備としてnpmとvueをインストールします。

$ sudo apt-get install npm
$ npm install -g @vue/cli @vue/cli-init

準備完了したら、スターターテンプレートのインストールを行います。nuxt_testは適当につけたプロジェクト名なので、お好きな名前にアレンジしてOKです。

$ vue init nuxt-community/starter-template nuxt_test

インストールが終わったらnpmを起動します。

$ cd nuxt_test
$ npm install
$ npm run dev

このあと、http://localhost:3000にアクセスすれば起動できたのですが、以下のようなエラーが発生して起動できなくなっています。

ERROR in ./.nuxt/client.js
Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (/node_modules/eslint-loader/index.js:148:18)

こちらへの対応策は以下2パターンです。

①原因を解決する。
本件の原因は、Nuxt2.0.0からisClientが利用出来なくなった事によるようです。ですので、以下ファイルを修正する事で解決できます。

【nuxt.config.js】

（修正前）
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {


（修正後）
    extend (config, { isDev }) {
      if (isDev && process.client) {

②バージョンを戻す
当然、Nuxt1.0.0の時は使えたのでバージョンを戻す事で再び動作させる事が出来ます。バージョンを戻すのは以下のファイルを修正する事で可能です。

【package.json 】

（修正前）
"dependenceies": {
    "nuxt":"^2.0.0"
},


（修正後）
"dependenceies": {
    "nuxt":"^1.0.0"
},

これで改めて「npm run dev」し、http://localhost:3000にアクセスしてみてください。正しく動作する事が確認出来ると思います。