Edited at

NuxtのESLintのエラー対応

More than 1 year has passed since last update.

Nuxt.jsのバージョン2が出たので早速使ってみましたが、公式のテンプレートでエラーが出るようになったので対応しました。


環境

Nuxt.js 2.1.0


作業

公式のスターターテンプレートを使います

$ vue init nuxt-community/starter-template my-site 

$ cd my-site

パッケージをインストール

$ yarn

サーバーを立ち上げ

$ yarn dev

 ERROR  Failed to compile with 1 errors                                                                                                             12:31:57 AM

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined
at Object.module.exports (/Users/m1ul24/projects/my-works/my-site/node_modules/eslint-loader/index.js:148:18)

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

するとここでエラーになりました。

どうやらeslint周りでのエラーのようです。

下記のように設定を変えてサーバーを立ち上げ直したら動きました。

(ソースの記事わからなくなってしまいましたが感謝です...!)

$ vim nuxt.config.js


nuxt.config.js

build: {

/*
** Run ESLint on save
*/

extend(config) {
if (process.server && process.browser) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}

$ yarn dev


追記

プルリクエストが上がっていました。こちらの方が良さそうです。

https://github.com/nuxt-community/starter-template/pull/83


nuxt.config.js

// ここを

- extend (config, { isDev, isClient }) {
- if (isDev && isClient) {

// こう修正
+ extend (config, { isDev }) {
+ if (isDev && process.isClient) {


@okapon_pon さん教えていただいてありがとうございます。