Addin custom settings tab

I am trying to add a custom settings tab to Spark 6.0 (as described in details here: https://laracasts.com/discuss/channels/spark/adding-a-settings-tab?page=0 ), but unfortunatly not with much luck. Does anyone have a guide or understand why I am getting the following error?

ERROR  Failed to compile with 1 errors                                                                                00:08:28
This relative module was not found:
* ../../spark-components/settings/test in ./resources/assets/js/components/bootstrap.js
                                                              Asset     Size  Chunks                    Chunk Names
    fonts/radio-select-default.svg?480bc0aebb3da809dc5b8d6f7ec60576  1.55 kB          [emitted]         
fonts/radio-select-is-selected.svg?ac228fff7b6af5be6d1620e5352ee43c  1.56 kB          [emitted]         
                                                         /js/app.js  2.15 MB       0  [emitted]  [big]  /js/app
                                                       /css/app.css   223 kB       0  [emitted]         /js/app
                                                   /css/app-rtl.css   223 kB       0  [emitted]         /js/app
                                              /js/sweetalert.min.js    17 kB          [emitted]         
ERROR in ./resources/assets/js/components/bootstrap.js
Module not found: Error: Can't resolve '../../spark-components/settings/test' in '/resources/assets/js/components'
 @ ./resources/assets/js/components/bootstrap.js 16:0-47
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss ./resources/assets/sass/app-rtl.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /.npm/_logs/2018-03-28T22_08_29_141Z-debug.log

I added the extra Spark settings tab by firstly creating the tab blade file resources/views/settings/test.blade.php:

<spark-test :user="user" inline-template>
    <div>
        <!-- Test section -->
    </div>
</spark-test>

Secondly we add the menu item to resources/views/vendor/spark/settings.blade.php

<li class="nav-item ">
    <a class="nav-link" href="#test" aria-controls="test" role="tab" data-toggle="tab">
        <svg class="icon-20 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path d=""/>
        </svg>
        {{__('Test')}}
    </a>
</li>

Thirdly, I added the new tab section to the same file:

<!-- Test  -->
<div role="tabcard" class="tab-pane" id="test">
    @include('spark::settings.test')
</div>

Fourthly, I define the JavaScript Component in the file resources/assets/js/spark-components/settings/test.js as:

var base = require('settings/test');

Vue.component('spark-test', {
    mixins: [base]
});

Lastly, we require the components in resources/assets/js/components/bootstrap.js by adding:

require('../../spark-components/settings/test');

I am sorry for the long description, but I hope this can help understanding the problem, and preferably help others creating custom setting tabs in Spark 6.0.