Nuxt.js で npx create-nuxt-app コマンドを実行後に npm run dev でアプリが起動しないバグがあったので、修正方法をご紹介します。
前提 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 で起動しないバグを修正した、現場からお送りしました。