laravel-5.4 - laravel 5.4パスポートリソースのロードに失敗しました:サーバーは500のステータスで応答しました(内部サーバーエラー)

Question

laravel 5.4をインストールしてパスポートパッケージを追加した後、コンソールにこれらのエラーが表示されます

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
app.js:11476 Uncaught (in promise) Error: Request failed with status code 500
    at createError (app.js:11476)
    at settle (app.js:11975)
    at XMLHttpRequest.handleLoad (app.js:11315)
http://localhost:8000/oauth/personal-access-tokens Failed to load resource: the server responded with a status of 500 (Internal Server Error)
app.js:11476 Uncaught (in promise) Error: Request failed with status code 500
    at createError (app.js:11476)
    at settle (app.js:11975)
    at XMLHttpRequest.handleLoad (app.js:11315)

ここに私のcomposer.josnがあります

{
"name": "laravel/laravel",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"type": "project",
"require": {
    "php": ">=5.6.4",
    "laravel/framework": "5.4.*",
    "laravel/passport": "^2.0",
    "laravel/tinker": "~1.0"
},
"require-dev": {
    "fzaninotto/faker": "~1.4",
    "mockery/mockery": "0.9.*",
    "phpunit/phpunit": "~5.0"
},
"autoload": {
    "classmap": [
        "database"
    ],
    "psr-4": {
        "App\\": "app/"
    }
},
"autoload-dev": {
    "psr-4": {
        "Tests\\": "tests/"
    }
},
"scripts": {
    "post-root-package-install": [
        "php -r \"file_exists('.env') || copy('.env.example', '.env');\""
    ],
    "post-create-project-cmd": [
        "php artisan key:generate"
    ],
    "post-install-cmd": [
        "Illuminate\\Foundation\\ComposerScripts::postInstall",
        "php artisan optimize"
    ],
    "post-update-cmd": [
        "Illuminate\\Foundation\\ComposerScripts::postUpdate",
        "php artisan optimize"
    ]
},
"config": {
    "preferred-install": "dist",
    "sort-packages": true
}

}

ここに私のhome.blade.phpがあります

@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
    <div class="col-md-8 col-md-offset-2">

            <passport-clients></passport-clients>
            <passport-authorized-clients></passport-authorized-clients>
            <passport-personal-access-tokens></passport-personal-access-tokens>
    </div>
</div>

@endsection

これは私のapp.jsファイルです

require('./bootstrap');



Vue.component(
  'passport-clients',
   require('./components/passport/Clients.vue')
);

Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
Vue.component('example', require('./components/Example.vue'));

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

ログインして個人用トークンを取得しようとすると、エラーが発生し、コンソールが表示されたときに内部サーバー エラーが見つかりました。何が欠けているのかわかりません。