Solution to 'Uncaught error' - when trying to use Vue JS with Laravel?

Question

I am trying to create my first Vue component to couple with my laravel mvc application. It's simply a component to use in my 'welcome.blade.php' file.

However, I am getting the following javascript error message in my console, when trying to view the page, and a blank screen:

app.js:96 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
C:\wamp64\www\client_transactions\node_modules\schema-utils\dist\util\hints.js:16
  const currentSchema = { ...schema
                          ^^^
SyntaxError: Unexpected token ...
    at NativeCompileCache._moduleCompile (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:242:18)
    at Module._compile (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\wamp64\www\client_transactions\node_modules\schema-utils\dist\ValidationError.js:11:5)
    at Module._compile (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\wamp64\www\client_transactions\node_modules\schema-utils\dist\validate.js:14:47)
    at Module._compile (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\wamp64\www\client_transactions\node_modules\schema-utils\dist\index.js:3:18)
    at Module._compile (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\wamp64\www\client_transactions\node_modules\babel-loader\lib\index.js:43:25)
    at Module._compile (C:\wamp64\www\client_transactions\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at Object../resources/js/app.js (http://127.0.0.1:8000/js/app.js:96:7)
    at __webpack_require__ (http://127.0.0.1:8000/js/app.js:20:30)
    at Object.0 (http://127.0.0.1:8000/js/app.js:118:1)
    at __webpack_require__ (http://127.0.0.1:8000/js/app.js:20:30)
    at http://127.0.0.1:8000/js/app.js:84:18
    at http://127.0.0.1:8000/js/app.js:87:10

This happens after completing the following steps to install Vue:

• Navigate to laravel project root and run 'npm install'. -Creating the following template:

    <template>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <div class="title m-b-md">
                    Welcome to Vue.js on Laravel
                </div>
                <div class="links">
                    <a href="https://laravel.com/docs">View Laravel Docs</a>
                    <a href="https://v2.vuejs.org/v2/guide/">View Vue Docs</a>
                    <a href="https://laracasts.com">Watch Videos</a>
                </div>
            </div>
        </div>
    </template>
    <script>
        export default {}
    </script>

• Updating my resources\js\app.js file to include the following:

    require('./bootstrap');
  
    window.Vue = require('vue');
  
    Vue.component('welcome', require('./components/Welcome.vue'));
  
    const app = new Vue({
        el: '#app'
    });
  

• Placing the component inside of my resources/views/welcome.blade.php file:

        <title>Laravel</title>
  

  [...]

• Adding a welcome route in laravel:

    Route::get('/welcome', ['as' => 'welcome.index', 'uses' => 'home_controller@welcome']);
  

If anyone was able to suggest a step that I might be missing, that would be absolutely super.