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

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

ただいまの
回答率

88.63%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 734
退会済みユーザー

退会済みユーザー

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

 error  'Vue' is not defined 

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

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});


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

const mix = require('laravel-mix');
const path = require('path');
require('laravel-mix-eslint');
require('laravel-mix-stylelint');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

const styleLintPlugin = require('stylelint-webpack-plugin');
mix.webpackConfig({
    plugins: [
        new styleLintPlugin({
            files: ['**/*.scss'],
            configFile: path.join(__dirname, '.stylelintrc.js'),
            syntax: 'scss'
        })
    ]
}).eslint();
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
        files: [
            'resources/views/**/*.blade.php',
            'public/**/*.*',
            'routes/**/*.php',
            '**/*.php'
        ],
        proxy: {
            target: 'http://127.0.0.1:8000/'
        }
    });

index.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>

<body>
    <div id="app">
        <example-component>
        </example-component>
    </div>
    <script src="{{ mix('js/app.js')}}"></script>
</body>

</html>

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "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",
        "prod": "npm run production",
        "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"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.1",
        "eslint": "^6.8.0",
        "eslint-loader": "^3.0.3",
        "eslint-plugin-vue": "^6.0.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "laravel-mix-eslint": "^0.1.3",
        "laravel-mix-stylelint": "^0.2.0",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "stylelint": "^12.0.0",
        "stylelint-config-recommended-scss": "^4.1.0",
        "stylelint-scss": "^3.13.0",
        "stylelint-webpack-plugin": "^1.1.2",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/24 23:37

    ありがとうございます!!!!!!!
    const Vue にし、さらに30行目を

    new Vue({
    el: '#app',
    });
    としたらエラーは消えました!!

    ただ、browsersyncがターミナル上では正常に動いているようにみえるのですが自動でブラウザを更新してくれません。お分かりになりますでしょうか...?

    キャンセル

  • 2020/01/25 09:00

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

    キャンセル

  • 2020/01/25 22:42

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

    キャンセル

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

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

関連した質問

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