Laravel＋Vueで error 'Vue' is not defined が出てしまう

Laravel＋Vue環境で eslintを入れているのですが、eslint実行時に

error 'Vue' is not defined

が出てしまいます。（ターミナルにエラーは出るものの、Vueファイルのコンパイル自体はできる）
原因がわからないので、教えていただけると幸いです。
各種ファイルの設定以下の通りです。

app.js

js
1/**
2 * First we will load all of this project's JavaScript dependencies which
3 * includes Vue and other libraries. It is a great starting point when
4 * building robust, powerful web applications using Vue and Laravel.
5 */
6
7require('./bootstrap');
8
9window.Vue = require('vue');
10
11/**
12 * The following block of code may be used to automatically register your
13 * Vue components. It will recursively scan this directory for the Vue
14 * components and automatically register them with their "basename".
15 *
16 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
17 */
18
19// const files = require.context('./', true, /.vue$/i)
20// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
21
22Vue.component('example-component', require('./components/ExampleComponent.vue').default);
23
24/**
25 * Next, we will create a fresh Vue application instance and attach it to
26 * the page. Then, you may begin adding components to this application
27 * or customize the JavaScript scaffolding to fit your unique needs.
28 */
29
30const app = new Vue({
31    el: '#app',
32});
33

ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

eslintrc.js

let rules = {
    "no-unused-vars": ["warn", { vars: "local", args: "none" }],
    "no-undef": "warn",
    "no-redeclare": "warn",
    "no-debugger": "warn",
    "no-console": "warn",
    "no-empty": "warn"
};
if (process.env.NODE_ENV == "production") {
    rules["no-debugger"] = "error";
    rules["no-console"] = "error";
}

module.exports = {
    plugins: [
      "vue"  
    ],
    extends: [
        "eslint:recommended",
        "plugin:vue/essential",
        'plugin:vue/recommended'// vue.js使ってなくてもlaravel-mix-eslintの仕様上必要
    ],
    env: {
        browser: true,
        es6: true,
        amd: true,
        jquery: true
    },
    parserOptions: {
        parser: 'babel-eslint',
        ecmaVersion: "2018"
    },
    rules: {
        "quotes": ["warn", "single"] 
    },
    globals:[
       "Vue: true"
    ]    
};

webpack.mix.js

js
1const mix = require('laravel-mix');
2const path = require('path');
3require('laravel-mix-eslint');
4require('laravel-mix-stylelint');
5
6/*
7 |--------------------------------------------------------------------------
8 | Mix Asset Management
9 |--------------------------------------------------------------------------
10 |
11 | Mix provides a clean, fluent API for defining some Webpack build steps
12 | for your Laravel application. By default, we are compiling the Sass
13 | file for the application as well as bundling up all the JS files.
14 |
15 */
16
17const styleLintPlugin = require('stylelint-webpack-plugin');
18mix.webpackConfig({
19    plugins: [
20        new styleLintPlugin({
21            files: ['**/*.scss'],
22            configFile: path.join(__dirname, '.stylelintrc.js'),
23            syntax: 'scss'
24        })
25    ]
26}).eslint();
27mix.js('resources/js/app.js', 'public/js')
28    .sass('resources/sass/app.scss', 'public/css')
29    .browserSync({
30        files: [
31            'resources/views/**/*.blade.php',
32            'public/**/*.*',
33            'routes/**/*.php',
34            '**/*.php'
35        ],
36        proxy: {
37            target: 'http://127.0.0.1:8000/'
38        }
39    });
40

index.blade.php

php
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>index</title>
9</head>
10
11<body>
12    <div id="app">
13        <example-component>
14        </example-component>
15    </div>
16    <script src="{{ mix('js/app.js')}}"></script>
17</body>
18
19</html>

package.json

json
1{
2    "private": true,
3    "scripts": {
4        "dev": "npm run development",
5        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
6        "watch": "npm run development -- --watch",
7        "watch-poll": "npm run watch -- --watch-poll",
8        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
9        "prod": "npm run production",
10        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
11    },
12    "devDependencies": {
13        "axios": "^0.19",
14        "bootstrap": "^4.0.0",
15        "browser-sync": "^2.26.7",
16        "browser-sync-webpack-plugin": "^2.0.1",
17        "cross-env": "^5.1",
18        "eslint": "^6.8.0",
19        "eslint-loader": "^3.0.3",
20        "eslint-plugin-vue": "^6.0.1",
21        "jquery": "^3.2",
22        "laravel-mix": "^4.0.7",
23        "laravel-mix-eslint": "^0.1.3",
24        "laravel-mix-stylelint": "^0.2.0",
25        "lodash": "^4.17.13",
26        "popper.js": "^1.12",
27        "resolve-url-loader": "^2.3.1",
28        "sass": "^1.20.1",
29        "sass-loader": "7.*",
30        "stylelint": "^12.0.0",
31        "stylelint-config-recommended-scss": "^4.1.0",
32        "stylelint-scss": "^3.13.0",
33        "stylelint-webpack-plugin": "^1.1.2",
34        "vue": "^2.5.17",
35        "vue-template-compiler": "^2.6.10"
36    }
37}
38

行動規範の内容に同意します

回答1件

ベストアンサー

window.Vue = require('vue');をconst Vue = require('vue');に変更すればエラーが消えるかと思います
eslint:recommendedではstrictモードが有効になっているものとして解析します
これによりnew Vueとしている箇所で参照されるものがwindow.Vueではなく、ファイル内の変数Vueとなるため未定義のエラーが出力されているものと思います

投稿2020/01/24 14:30

退会済みユーザー

総合スコア0

退会済みユーザー

2020/01/24 14:37

ありがとうございます！！！！！！！ const Vue　にし、さらに30行目を new Vue({ el: '#app', }); としたらエラーは消えました！！ただ、browsersyncがターミナル上では正常に動いているようにみえるのですが自動でブラウザを更新してくれません。お分かりになりますでしょうか...?

退会済みユーザー

2020/01/25 00:00

browsersyncの件、起動を「 $ npm run watch」ではなく「$ npm run watch-poll」とすれば解決しました！！ありがとうございましたーー！！！泣

退会済みユーザー

2020/01/25 13:42

解決したようでよかったです解決済みとしていただければと思います https://teratail.com/help#resolve-question

行動規範の内容に同意します