require is not defined in app.js for laravel passport

Question

require is not defined in app.js for laravel passport

2.9k views Asked by Swapnil Chaudhari At 13 September 2024 at 00:30

I want to use Laravel Passport in my project, I have followed this tutorial of Laravel Passport https://laravel.com/docs/5.3/passport.

After following this tutorial, I am getting Uncaught ReferenceError: require is not defined error.

Please have a look into my files :

gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-webpack');

elixir(function(mix) {

    mix.scripts('app.js');

    mix.styles([
                'bootstrap.min.css',
                'font-awesome.min.css',
                'gentelella.min.css'
               ],'public/css/app.css');

});

resource/assets/js/app.js

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')
);

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

home.blade.php

@extends('layouts.blank')
@section('content')

<div class="container" id="manage-passport">

  <!-- let people make clients -->
    <passport-clients></passport-clients>

    <!-- list of clients people have authorized to access our account -->
    <passport-authorized-clients></passport-authorized-clients>

    <!-- make it simple to generate a token right in the UI to play with -->
    <passport-personal-access-tokens></passport-personal-access-tokens>
</div>

@stop

blank.blade.php

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Passport! | </title>

    <meta name="token" id="token" value="{{ csrf_token() }}">
    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">

</head>

<body class="nav-md">
    <div class="container body">
        <div class="main_container">
            @yield('content')
        </div>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="js/gentelella.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>

    @stack('scripts')

</body>

Original Q&A

There are 1 answers

**Alex** · Answer 1 · 2017-01-04 10:12:08

Maybe the problem in the absence of token?

blank.blade.php

<script>
        window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!}
</script>

also, check whether the transmitted parameters such as token

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

TechQA.

require is not defined in app.js for laravel passport

There are 1 answers

Related Questions in LARAVEL

Related Questions in LARAVEL-PASSPORT

Popular Questions

Popular Tags

Trending Questions