[Nuxt.js] npx create-nuxt-app 後に npm run dev で起動しないバグ修正方法

Tadashi Shigeoka ·  Sat, November 17, 2018

Nuxt.js で npx create-nuxt-app コマンドを実行後に npm run dev でアプリが起動しないバグがあったので、修正方法をご紹介します。

Nuxt.js

前提 Node.js, npx のバージョン

以下のような手順で Node.js 最新版と Nuxt.js をインストールしている前提とします。

nvm install v10.13.0
nvm use v10.13.0
npm install nuxt
npx --version
# 6.2.0

Nuxt.js インストール

上記の公式ドキュメントを参考にして、以下のような構成で npx create-nuxt-app コマンドを実行しました。

$ npx create-nuxt-app myapp
npx: 402個のパッケージを15.722秒でインストールしました。
> Generating Nuxt.js project in /Users/username/works/myapp
? Project name myapp
? Project description MyApp Description
? Use a custom server framework micro
? Use a custom UI framework vuetify
? Choose rendering mode Single Page App
? Use axios module yes
? Use eslint yes
? Use prettier yes
? Author name Tadashi Shigeoka
? Choose a package manager npm

バグ修正

npm run dev がエラーで起動しない出力

$ npm run dev

> [email protected] dev /Users/username/works/myapp
> cross-env NODE_ENV=development nodemon server/index.js --watch server

[nodemon] 1.18.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /Users/username/works/myapp/server/**/*
[nodemon] starting `node server/index.js`
ℹ info Preparing project for development
ℹ info Initial build may take a while


 READY  Server listening on http://localhost:3000

✔ success Builder initialized
✔ success Nuxt files generated

✖ Client
  Compiled with some errors in 15.82s

✖ error friendly-errors › Failed to compile with 1 errors
✖ error friendly-errors › in ./layouts/default.vue
❯ log friendly-errors › Module Error (from ./node_modules/eslint-loader/index.js):

/Users/username/works/myapp/layouts/default.vue
   89:1  error  Delete `··`                           prettier/prettier
   90:3  error  Delete `··`                           prettier/prettier
   91:1  error  Replace `······` with `····`          prettier/prettier
   92:1  error  Delete `··`                           prettier/prettier
   93:1  error  Replace `········` with `······`      prettier/prettier
   94:1  error  Delete `··`                           prettier/prettier
   95:1  error  Replace `········` with `······`      prettier/prettier
   96:1  error  Delete `··`                           prettier/prettier
   97:1  error  Replace `··········` with `········`  prettier/prettier
   98:7  error  Delete `··`                           prettier/prettier
   99:1  error  Delete `··`                           prettier/prettier
  100:7  error  Delete `··`                           prettier/prettier
  101:1  error  Delete `··`                           prettier/prettier
  102:7  error  Delete `··`                           prettier/prettier
  103:5  error  Delete `··`                           prettier/prettier
  104:1  error  Replace `····` with `··`              prettier/prettier
  105:1  error  Delete `··`                           prettier/prettier

✖ 17 problems (17 errors, 0 warnings)
  17 errors and 0 warnings potentially fixable with the `--fix` option.

❯ log friendly-errors › 
 @ ./.nuxt/App.js 4:0-47 6:14-23
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js
ℹ info Waiting for file changes

ctx.isClient を process.client へ書き換える

nuxt.config.js

diff --git a/nuxt.config.js b/nuxt.config.js
index 43ba8fd..f368af6 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -61,7 +61,7 @@ module.exports = {
     */
     extend(config, ctx) {
       // Run ESLint on save
-      if (ctx.isDev && ctx.isClient) {
+      if (ctx.isDev && process.client) {
         config.module.rules.push({
           enforce: 'pre',
           test: /\\.(js|vue)$/,

npm run dev が正常起動した出力

$ npm run dev
    

> [email protected] dev /Users/username/works/myapp
> cross-env NODE_ENV=development nodemon server/index.js --watch server

[nodemon] 1.18.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /Users/username/works/myapp/server/**/*
[nodemon] starting `node server/index.js`
ℹ info Preparing project for development
ℹ info Initial build may take a while


 READY  Server listening on http://localhost:3000

✔ success Builder initialized
✔ success Nuxt files generated

✔ Client
  Compiled successfully in 8.67s

ℹ info Waiting for file changes

以上、Nuxt.js で npx create-nuxt-app 実行後に npm run dev で起動しないバグを修正した、現場からお送りしました。