Issue with loading jquery and boostrap (possible app.js & webpack.mix.js issue)

Asked by: derrickrozay

I'm trying to create a dropdown using bootstrap but the dropdown doesnt open. I fixed it by adding jquery and boostrap css & js cdn links to my header and footer. My understanding is that both jquery.js and bootstrap.js are supposed to be included in app.js. However when I look at my app.js I dont see code for either and it doesn't look right.

I created a custom test.js file that is suppose to show an alert on page load, and when a button is clicked but I get $ is undefined unless I combine jquery.js and test.js into one file, again shouldn't jquery alreayd be loaded in app.js

test.js

$(function() {
    alert('test');
}

function test() {
    alert('worked');
}

webpack.js

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
    .styles(['resources/assets/css/approve.css'], 'public/css/approve.css')
    .scripts(['resources/assets/js/jquery-3.2.1.js',
        'resources/assets/js/test.js'],
        'public/js/vendor.js');

app.js

https://pastebin.com/rnWkQBmz

footer.js

<script type="text/javascript" src="{{asset('js/vendor.js')}}"></script>
<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>

bootstrap.js

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

full bootstrap.js https://pastebin.com/274biWYp

app.scss

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Am I correct in my thinking that if app.js combines bootstrap.js and jquery.js and I shouldnt have to include them again?

Source