Bootstrap's Javascript requires jQuery error

I was trying to set up my project so that it would pull in bootstrap & jquery via npm. However, when attempting to do so, I get an error:

all.a3297c6….js:5607 Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object../node_modules/bootstrap/dist/js/bootstrap.min.js

My webpack.mix.js file:

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([
        '././node_modules/jquery/dist/jquery.min.js',
        '././node_modules/bootstrap/dist/js/bootstrap.min.js', 
        'resources/assets/js/app.js',
    ],'public/js/all.js').version();

 mix.styles([
        '././node_modules/bootstrap/dist/css/bootstrap.min.css',
        'resources/assets/css/theme/common.css', 
        'resources/assets/css/theme/animate+animo.css',
        'resources/assets/css/theme/csspinner.css',
        'resources/assets/css/theme/landing.css',
        '././node_modules/sweetalert/dist/sweetalert.css',
        'resources/assets/css/loader.css',
        '././node_modules/nouislider/distribute/nouislider.css',
        'resources/assets/css/theme/app.css',
    ], 'public/css/all.css').version();

My app.js file:

import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'
window.jQuery = window.$ = require('jquery');
import 'bootstrap'

window.Vue = Vue;
Vue.prototype.$http = axios;
Vue.use(VueRouter);

axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

//Helper file that contains loading screen logic
require('./helpers');

Interestingly enough, if I use a CDN for jQuery in the blade file that is pulling all this in, it fixes the problem, but I get the same error for Tether (makes sense, it is a dependency for Bootstrap 4.0). Adding Tether to the webpack file does not fix this -- it seems that I have to add everything via the CDN (not ideal).

Are you not allowed to bundle bootstrap, jquery, and tether in one mix.js? How could I go about doing this -- should I simply separate bootstrap and jQuery?

via Chebli Mohamed