2

I had setup Laravel with Vue.js dependencies like vue-router and vue-axios and also npm install and after just created components into it and run command 'npm run dev' for Laravel mix build successful thereafter I got this console error:

Uncaught SyntaxError: Unexpected token '<'

My code below:

blade file code:

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        <link href="{{ mix('/css/app.css') }}" type="text/css" rel="stylesheet" />
        <meta name="csrf-token" value="{{ csrf_token() }}" />
    </head>
    <body>
        <div id="app">
          <example-component></example-component>
        </div>
        <script src="{{ mix('/js/app.js') }}"></script>
    </body>
</html>

app.js code

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import App from './App.vue';
import HomeComponent from './components/HomeComponent.vue';
import CreateComponent from './components/CreateComponent.vue';
import IndexComponent from './components/IndexComponent.vue';
import EditComponent from './components/EditComponent.vue';


Vue.use(VueRouter);
Vue.use(VueAxios, axios);






const routes = [
  {
      name: 'home',
      path: '/',
      component: HomeComponent
  },
  {
      name: 'create',
      path: '/create',
      component: CreateComponent
  },
  {
      name: 'posts',
      path: '/posts',
      component: IndexComponent
  },
  {
      name: 'edit',
      path: '/edit/:id',
      component: EditComponent
  }
];



/**
 * 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.
 */

Vue.component('home-component', require('./components/HomeComponent.vue'));

const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

web.php code

Route::get('/{any}', function () {
    return view('post');
  })->where('any', '.*');
5
  • The only thing I can see right now is your missing ExampleComponent. But I think you already know ;) Commented Nov 3, 2019 at 20:28
  • First ExampleComponent I had added in js file and now also added but not working. Commented Nov 3, 2019 at 20:34
  • Did you have a look at the generated HTML source in your browser? Try to find the extra >. Commented Nov 3, 2019 at 20:37
  • Does this answer your question? Vue.js unexpected token in browser but npm run build with no errors Commented Nov 3, 2019 at 21:46
  • In my case I forgot to use extension .js with <script type="application/javascript" src="{{ asset('app-assets/js/core/app-menu.js') }}"></script> , first it was <script type="application/javascript" src="{{ asset('app-assets/js/core/app-menu') }}"></script> before. Thank You @Unflux opening URL from View Page Source solved my problem. Commented Oct 8, 2020 at 11:31

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.