nuxtを勉強しようと思って、ja.nuxtjs.orgのドキュメントに従ってアプリを作ったらエラー一杯で困ったので、他の方の助けになればと思ってまとめておく。
npx create-nuxt-app test_app
でtest_appアプリを作成する。途中、UI frameworkとか組み込むモジュールとか色々聞かれるので、欲張って組み込めるものは全部組み込んでみた。（これが間違いの元だった）
UI framework: Vuetify.js
Nuxt.js modules: 全部選択
linting tools: 全部選択
testing framework: Jest
数分すると組み込みが終わる。
npm run dev
を発行してブラウザで、http://localhost:3000/ にアクセスすると、動作を確認できるということだが、Loading…で固まる。orz
一旦止めて、
npm run lint
を試してみると以下のようなエラーが出る。
> test@1.0.0 lint C:\Users\nkd\Documents\vue\test
> eslint --ext .js,.vue --ignore-path .gitignore .
C:\Users\nkd\Documents\vue\test\node_modules\eslint\lib\rules\no-octal-escape.js:41
/^(?:[^\\]|\\.)*?\\([0-3][0-7]{1,2}|[4-7][0-7]|0(?=[89])|[1-7])/su
^
SyntaxError: Invalid regular expression flags
at NativeCompileCache._moduleCompile (C:\Users\nkd\Documents\vue\test\node_modules\v8-compile-cache\v8-compile-cache.js:242:18)
at Module._compile (C:\Users\nkd\Documents\vue\test\node_modules\v8-compile-cache\v8-compile-cache.js:186:36)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (C:\Users\nkd\Documents\vue\test\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
at no-octal-escape (C:\Users\nkd\Documents\vue\test\node_modules\eslint\lib\rules\index.js:171:30)
at Map.get (C:\Users\nkd\Documents\vue\test\node_modules\eslint\lib\rules\utils\lazy-loading-rule-map.js:68:24)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! test@1.0.0 lint: `eslint --ext .js,.vue --ignore-path .gitignore .`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the test@1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\nkd\AppData\Roaming\npm-cache\_logs19-11-29T04_14_50_383Z-debug.log
lintした内容に問題があるんではなく、eslint自体に問題がありそうなので、googleで調べてみると、eslintを6.0.1にダウングレードするとよいという情報を発見したので試してみる。（参考: https://github.com/eslint/eslint/issues/12493）
npm install eslint@6.0.1 --save
を発行後、再度lintしてみると、上記の問題は解消されたけど、今度は、ソースコード自体のエラーが大量に表示されました。個々に修正は大変そうなので、package.jsonのscriptsの中に
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
を追加して自動的に修正するようにする。修正するために
npm run lintfix
を発行。エラーがなくなったので、
npm run dev
をしたのだけど、また、止まる。
なんでだろうと、エディタでソースを見ていて、以下ようなエラーが出てることに気が付きました。
"C:\Program Files\nodejs\node.exe" C:/Users/nkd/Documents/vue/nuxt_bbs/node_modules/stylelint/bin/stylelint.js -f json --stdin-filename inspire.vue
Error: No rules found within configuration. Have you provided a "rules" property?
at module.exports (C:\Users\nkd\Documents\vue\nuxt_bbs\node_modules\stylelint\lib\utils\configurationError.js:8:28)
at augmentConfigBasic.then.then.then.augmentedConfig (C:\Users\nkd\Documents\vue\nuxt_bbs\node_modules\stylelint\lib\augmentConfig.js:89:15)
at <anonymous>
stylelintの設定ファイルでrulesというプロパティがないというエラーです。
stylelint.config.jsを見てみると以下のようになっていて、rulesプロパティがないことがわかりました。
module.exports = {
// add your custom config here
// https://stylelint.io/user-guide/configuration
}rulesプロパティを以下のように追加するとちゃんと期待通り動きました。
module.exports = {
// add your custom config here
// https://stylelint.io/user-guide/configuration
"rules": {}
}
追記）
eslintのエラーについて。
node.jsのバージョンを上げたらeslint@6.7.1でも動作しました。