Q&A前提・実現したいこと
vuejs-datepickerプラグインを利用したVueアプリをNuxtで動かしたいです。
発生している問題・エラーメッセージ
$ npm run dev > taskmanagementsheet@1.0.0 dev /mnt/c/develop/Vue/firstnuxt > nuxt WARN You are using an unsupported version of Node.js (v10.19.0). It is recommended to use the latest LTS version (https://nodejs.org/en/about/releases) ╭───────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.2 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯ ℹ Preparing project for development 09:23:33 ℹ Initial build may take a while 09:23:33 ✔ Builder initialized 09:23:33 ✔ Nuxt files generated 09:23:33 ✖ Client Compiled with some errors in 23.41s ✔ Server Compiled successfully in 21.60s ERROR Failed to compile with 1 errors friendly-errors 09:24:06 ERROR in ./plugins/vue-datepicker.js friendly-errors 09:24:06 Module build failed (from ./node_modules/eslint-loader/index.js): friendly-errors 09:24:06 Error: standard: Configuration for rule "accessor-pairs" is invalid: Value {"setWithoutGet":true,"enforceForClassMembers":true} should NOT have additional properties. Referenced from: /mnt/c/develop/Vue/firstnuxt/node_modules/@nuxtjs/eslint-config/index.js Referenced from: /mnt/c/develop/Vue/firstnuxt/.eslintrc.js at validateRuleOptions (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-validator.js:119:19) at Object.keys.forEach.id (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-validator.js:162:9) at Array.forEach (<anonymous>) at validateRules (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-validator.js:161:30) at Object.validate (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-validator.js:239:5) at loadFromDisk (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:516:19) at load (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:559:20) at configExtends.reduceRight (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:425:36) at Array.reduceRight (<anonymous>) at applyExtends (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:403:26) at loadFromDisk (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:523:22) at load (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:559:20) at configExtends.reduceRight (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:425:36) at Array.reduceRight (<anonymous>) at applyExtends (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:403:26) at loadFromDisk (/mnt/c/develop/Vue/firstnuxt/node_modules/eslint/lib/config/config-file.js:523:22) friendly-errors 09:24:06 @ ./.nuxt/index.js 29:0-84 241:43-77 247:19-53 @ ./.nuxt/client.js @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js friendly-errors 09:24:06 ℹ Waiting for file changes 09:24:06 ℹ Memory usage: 170 MB (RSS: 280 MB) 09:24:06 ℹ Listening on: http://localhost:3000/
該当のソースコード
アプリ本体は2KLあるので設定ファイルを示します。
nuxt.config.js
JavaScript
1export const head = { 2 title: 'taskmanagementsheet', 3 meta: [ 4 { charset: 'utf-8' }, 5 { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 6 { hid: 'description', name: 'description', content: 'Nuxt.js project' } 7 ], 8 link: [ 9 { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 10 ] 11} 12export const loading = { color: '#3B8070' } 13export const plugins = [ 14 { src: '~/plugins/vue-datepicker', mode: 'client' } 15] 16export const build = { 17 /* 18 ** Run ESLint on save 19 */ 20 extend(config, { isDev, isClient }) { 21 if (isDev && isClient) { 22 config.module.rules.push({ 23 enforce: 'pre', 24 test: /.(js|vue)$/, 25 loader: 'eslint-loader', 26 exclude: /(node_modules)/ 27 }) 28 } 29 } 30}
vue-datepicker.js
JavaScript
1import Vue from 'vue' 2import Datepicker from 'vuejs-datepicker' 3Vue.component('date-picker', Datepicker)
試したこと
.eslintrc.js
JavaScript
1module.exports = { 2 root: true, 3 env: { 4 browser: true, 5 node: true 6 }, 7 parserOptions: { 8 parser: 'babel-eslint' 9 }, 10 extends: [ 11 '@nuxtjs', 12 'standard', 13 'plugin:nuxt/recommended', 14 "@nuxtjs/eslint-config" 15 ], 16 plugins: [ 17 ], 18 // add your custom rules here 19 rules: { 20 "accessor-pairs":"warn", 21 "setWithoutGet":"warn", 22 "enforceForClassMembers":"warn" 23 } 24}
.eslintignore
./plugins/vue-datepicker.js ./node_modules/vuejs-datepicker/**
補足情報（FW/ツールのバージョンなど）
$ uname -a Linux DESKTOP-IFF6N8O 4.4.0-19041-Microsoft #488-Microsoft Mon Sep 01 13:43:00 PST 2020 x86_64 x86_64 x86_64 GNU/Linux $ cat /etc/os-release NAME="Ubuntu" VERSION="20.04.2 LTS (Focal Fossa)" ID=ubuntu ID_LIKE=debian PRETTY_NAME="Ubuntu 20.04.2 LTS" VERSION_ID="20.04" HOME_URL="https://www.ubuntu.com/" SUPPORT_URL="https://help.ubuntu.com/" BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/" PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy" VERSION_CODENAME=focal UBUNTU_CODENAME=focal
回答1件
0
自己解決
package.json
json
1"eslint-loader": "^3.0.4"
npm i eslint-loader
投稿2021/03/29 18:19
総合スコア1105
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。