OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Uncaught SyntaxError: Unexpected token '<' in Laravel/Vue Application

  • Thread starter Thread starter Abdul Raheem Ghani
  • Start date Start date
A

Abdul Raheem Ghani

Guest
I am working on a Laravel/Vue Single Page Application but in the very beginning I got an error saying:

Uncaught SyntaxError: Unexpected token '<'

Here is my app.blade.php which is a layout file:

Code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="{{ url('/') }}">
            {{ config('app.name', 'Laravel') }}
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Left Side Of Navbar -->
            <ul class="navbar-nav mr-auto">

            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="navbar-nav ml-auto">
                <!-- Authentication Links -->
                @guest
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                    </li>
                    @if (Route::has('register'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                    @endif
                @else
                    <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{{ route('logout') }}"
                               onclick="event.preventDefault();
                                             document.getElementById('logout-form').submit();">
                                {{ __('Logout') }}
                            </a>

                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                        </div>
                    </li>
                @endguest
            </ul>
        </div>
    </div>
</nav>

<main class="py-4">
    @yield('content')
</main>
</div>
</body>
</html>

Here is the home.blade.php:

Code:
@extends('layouts.app')

@section('content')

   <App></App>

@endsection

Here is web.php:

Code:
<?php

Auth::routes();

Route::get('/{any}', 'AppController@index')->where('any', '.*');

Below is the app.js file:

Code:
import Vue from 'vue';
import router from './router';
import App from './components/App';

require('./bootstrap');

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

components: {
    App
},
 router
});

Below is the router.js file that includes routes:

Code:
import Vue from 'vue';
import VueRouter from 'vue-router';
import ExampleComponent from './components/ExampleComponent';

Vue.use(VueRouter);

export default new VueRouter({
routes: [
    { path: '/', component: ExampleComponent },
],

mode: 'history'
});

I have placed all the code here in this question and there is nothing extra that causes the error.

Here is a screenshot of the Network tab which does not show any 404:

Network tab

<p>I am working on a Laravel/Vue Single Page Application but in the very beginning I got an error saying:</p>
<blockquote>
<p>Uncaught SyntaxError: Unexpected token '<'</p>
</blockquote>
<p>Here is my <code>app.blade.php</code> which is a layout file:</p>
<pre><code><!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">

</ul>

<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>

<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>
</code></pre>
<p>Here is the <code>home.blade.php</code>:</p>
<pre><code>@extends('layouts.app')

@section('content')

<App></App>

@endsection
</code></pre>
<p>Here is <code>web.php</code>:</p>
<pre><code><?php

Auth::routes();

Route::get('/{any}', 'AppController@index')->where('any', '.*');
</code></pre>
<p>Below is the <code>app.js</code> file:</p>
<pre><code>import Vue from 'vue';
import router from './router';
import App from './components/App';

require('./bootstrap');

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

components: {
App
},
router
});
</code></pre>
<p>Below is the <code>router.js</code> file that includes <code>routes</code>:</p>
<pre><code>import Vue from 'vue';
import VueRouter from 'vue-router';
import ExampleComponent from './components/ExampleComponent';

Vue.use(VueRouter);

export default new VueRouter({
routes: [
{ path: '/', component: ExampleComponent },
],

mode: 'history'
});
</code></pre>
<p>I have placed all the <code>code</code> here in this question and there is nothing extra that causes the error.</p>
<p>Here is a screenshot of the <code>Network</code> tab which does not show any <code>404</code>:</p>
<p><a href="https://i.sstatic.net/nb4Qk.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/nb4Qk.jpg" alt="Network tab" /></a></p>
 
Top