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

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

ただいまの
回答率

88.37%

vue-cli 3.0環境構築でエラー(BrowserslistError)が出る

受付中

回答 0

投稿

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

1042limit

score 29

Vue Cliで環境構築をしていますが、コケてしまい進みません。
ご助力のほどよろしくお願いいたします。

環境
windows 10
node node v10.16.3

エラーが出る事象

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve


と進むのですがnpm run serveと入れるとエラーが出ます。

Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] C:\Users\User\desktop\app\app3\src\main.js: C:\Users\User\desktop\app\app3 contains both browserslist and package.json with browsers (While processing: "C:\\Users\\User\\desktop\\app\\app3\\node_modules\\@vue\\babel-preset-app\\index.js")
    at C:\Users\User\desktop\app\app3\node_modules\browserslist\node.js:263:15
    at eachParent (C:\Users\User\desktop\app\app3\node_modules\browserslist\node.js:47:18)
    at Object.findConfig (C:\Users\User\desktop\app\app3\node_modules\browserslist\node.js:246:20)
    at Function.loadConfig (C:\Users\User\desktop\app\app3\node_modules\browserslist\node.js:177:37)
    at browserslist (C:\Users\User\desktop\app\app3\node_modules\browserslist\index.js:325:31)
    at getTargets (C:\Users\User\desktop\app\app3\node_modules\@babel\preset-env\lib\targets-parser.js:184:50)
    at getPolyfills (C:\Users\User\desktop\app\app3\node_modules\@vue\babel-preset-app\index.js:20:26)
    at module.exports (C:\Users\User\desktop\app\app3\node_modules\@vue\babel-preset-app\index.js:106:17)
    at loadDescriptor (C:\Users\User\desktop\app\app3\node_modules\@babel\core\lib\config\full.js:167:14)
    at cachedFunction (C:\Users\User\desktop\app\app3\node_modules\@babel\core\lib\config\caching.js:33:19)
    at loadPresetDescriptor (C:\Users\User\desktop\app\app3\node_modules\@babel\core\lib\config\full.js:257:36)
    at config.presets.reduce (C:\Users\User\desktop\app\app3\node_modules\@babel\core\lib\config\full.js:79:21)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (C:\Users\User\desktop\app\app3\node_modules\@babel\core\lib\config\full.js:76:38)
    at loadFullConfig (C:\Users\User\desktop\app\app3\node_modules\@babel\core\lib\config\full.js:110:6)
    at process.nextTick (C:\Users\User\desktop\app\app3\node_modules\@babel\core\lib\transform.js:28:33)


package.jsonは以下のようになっています。

{
  "name": "app3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

やったこと

.browserslistrcを削除するといいとStackOverFlowに書かれていたので

rm  .browserslistrc


を行い除去を試みましたがそのようなファイルはないと返ってきます。

ご助力のほどよろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

まだ回答がついていません

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

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

関連した質問

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