質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.79%

The keyword 'export' is reservedの解消方法がわかりません

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 727

score 123

以下のサイト(Nuxt.jsの公式サイト)
https://ja.nuxtjs.org/guide/development-tools/
の手順をもとに、eslintおよびprettierを利用できる環境を以下の手順で構築しようとしました。
①npmでeslintとprettierパッケージを以下のコマンド入力によってインストールする

npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier


何のエラーもなくインストールできました。

②.eslintrc.js ファイルをプロジェクトのルートディレクトにつくって公式サイトどおり ESLint を設定する

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    'eslint:recommended',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // より厳しいルールにするには`plugin:vue/strongly-recommended` もしくは `plugin:vue/recommended` に切り替えることを検討してください。
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  // *.vue ファイルを lint にかけるために必要
  plugins: [
    'vue'
  ],
  // ここにカスタムルールを追加します。
  rules: {
    'semi': [2, 'never'],
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': ['error', { 'semi': false }]
  }
}


コピペのため、コード上に問題ないと考えます。

③lint と lintfix スクリプトを package.json に追加する

"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}


コピペのため、コード上に問題ないと考えます。
④以下のコードを実行し、挙動を確認する

npm run lint

 

npm run lintfix

⑤nuxt.config.jsに以下の通り、記述する。

  build: {
............
...........
............
  extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/
        })
      }
    }
  }


なにも実行しなくともデフォルトで
keyword 'export' is not defined..
とコンソール上に出てしまう 

バージョン情報
"nuxt": "^2.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.0.1",
"prettier": "^1.19.1",

macOS 10.14.2

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • dameo

    2019/12/26 14:07 編集

    実際に何をしたのか具体的に書くべきです。
    あなたが頭に思い描いてること自体が間違っていて、
    ドキュメントを正しく理解できないまま、間違ったことをしているように見えます。
    なので、ドキュメントを正しく理解してそのとおりにやった人には、
    あなたが実際に何をしてしまっているのか皆目見当がつかないのです。

    以下の手順では特に問題はありませんでした。
    (1) npx create-nuxt-app simpleapp
    ↑入力はnpm選択以外、全てEnterキーのみ
    (2) cd simpleapp
    (3) npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
    (4) vi .eslintrc.js
    ↑viエディタで質問内容の最初のコードブロックに書かれてる内容と同じになるように編集する
    (5) vi package.json
    ↑viエディタでlintとlintfixをpackage.jsonのscriptに追加する
    (6) vi nuxt.config.js
    ↑viエディタでnpm run dev中にソース編集でwebpack hot reload機能による再読み込み時にlintを自動で動かすように設定する

    (5)、(6)の編集結果
    ■package.json
    {
    "name": "simpleapp",
    "version": "1.0.0",
    "description": "My ace Nuxt.js project",
    "author": "",
    "private": true,
    "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
    },
    "dependencies": {
    "nuxt": "^2.0.0"
    },
    "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-vue": "^6.0.2",
    "prettier": "^1.19.1"
    }
    }

    ■nuxt.config.js
    export default {
    mode: "universal",
    /*
    ** Headers of the page
    */
    head: {
    title: process.env.npm_package_name || "",
    meta: [
    { charset: "utf-8" },
    { name: "viewport", content: "width=device-width, initial-scale=1" },
    {
    hid: "description",
    name: "description",
    content: process.env.npm_package_description || ""
    }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
    },
    /*
    ** Customize the progress-bar color
    */
    loading: { color: "#fff" },
    /*
    ** Global CSS
    */
    css: [],
    /*
    ** Plugins to load before mounting the App
    */
    plugins: [],
    /*
    ** Nuxt.js dev-modules
    */
    buildModules: [],
    /*
    ** Nuxt.js modules
    */
    modules: [],
    /*
    ** Build configuration
    */
    build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    // Run ESLint on save
    if (ctx.isDev && ctx.isClient) {
    config.module.rules.push({
    enforce: "pre",
    test: /\.(js|vue)$/,
    loader: "eslint-loader",
    exclude: /(node_modules)/
    })
    }
    }
    }
    }

    キャンセル

  • ff7575

    2019/12/26 14:20 編集

    a

    キャンセル

  • dameo

    2019/12/26 15:10

    編集履歴のコメントと現状の質問内容が完全にミスマッチしています。
    正しく修正するか、削除してください。

    キャンセル

回答 1

check解決した方法

0

dameo様のご指摘の通り、質問内容の修正を行なっていた時、再度初めから導入したところ、不明なエラーおよび警告が出現せずに済みました。
dameo様とその他の方々には、このようなことでお時間をとらせてしまい、大変申し訳ありませんでした。
今後は、この反省を生かして質問内容の改善、マニュアルを読み込むことを実践します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る