JS errors after upgrade to Laravel 5.6 and switch from Gulp to Mix

Hi,

I've recently upgraded to Laravel 5.6 as I need to use Passport, and taken the opportunity to switch from Gulp to Laravel-mix.

npm run dev is working fine, but i am going round in circles with endless js bugs in Console, such as

jQuery.Deferred exception: ClipboardJS is not defined ReferenceError: ClipboardJS is not defined

for this code

require('./bootstrap');
require('clipboard');

$(document).ready(function() {

    var clipboard = new ClipboardJS('.btn-copy');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });

});

When I reference the CDN clipboard.js in my view, the problem fixes, so I am wondering if I have not set up mix or extract() correctly?

My webpack.mix.js looks like this

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
    .js('resources/assets/js/app.js', 'public/js')
        .extract([
              'jquery',
              'select2',
              'jquery-validation',
              'bootstrap',
              'bootstrap-datepicker',
              'chartist',
              'clipboard',
              'cropper',
              'moment',
              'vue'
        ])

    .js('resources/assets/js/proto.js', 'public/js')

    .sass('resources/assets/sass/app.scss', 'public/css')

    .sourceMaps();

My package.json like this

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "bootstrap-datepicker": "^1.6.1",
    "chartist": "^0.11.0",
    "cropit": "^0.5.1",
    "cropper": "^4.0.0",
    "cross-env": "^5.2.0",
    "del": "^4.0.0",
    "font-awesome": "^4.7.0",
    "graceful-fs": "^4.1.15",
    "gulp": "^4.0.0",
    "jquery": "^3.3.1",
    "jquery-validation": "^1.19.0",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-delete": "^1.0.1",
    "laravel-elixir-uglify": "^2.0.1",
    "node-sass": "^4.11.0",
    "resolve-url-loader": "^3.0.1",
    "sass": "^1.17.3",
    "sass-loader": "^7.1.0",
    "url-loader": "^1.1.2",
    "vue-template-compiler": "^2.6.9",
    "webpack": "^4.29.6"
  },
  "dependencies": {
    "acorn": "^6.1.1",
    "ajv": "^6.10.0",
    "bootstrap-sass": "^3.4.1",
    "chart.js": "^2.8.0",
    "clean-css": "^4.2.1",
    "clipboard": "^2.0.4",
    "deep-extend": "^0.6.0",
    "gulp-cli": "^2.0.1",
    "hoek": "^6.1.2",
    "imagemin": "^6.1.0",
    "laravel-mix": "^4.0.15",
    "minimatch": "^3.0.4",
    "moment": "^2.24.0",
    "popper.js": "^1.14.7",
    "select2": "^4.0.6-rc.1",
    "vue": "^2.6.8"
  }
}

and I am referencing the compiled files like this

<script src="/js/manifest.js"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/proto.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

Can anybody help? I am very confused.

Thanks, Dan