Uncaught ReferenceError: require is not defined at require('./bootstrap') Laravel Mix

I have compiled my stylesheets and javascript files using Laravel Mix, code is given below in webpack.mix.js:

mix.babel([
    'public/js/plugins/loaders/pace.min.js',
    'resources/assets/js/app.js',
    'public/js/plugins/loaders/blockui.min.js',
    'public/js/plugins/ui/nicescroll.min.js',
    'public/js/plugins/ui/drilldown.js',
    'public/js/plugins/ui/fab.min.js',
    'public/js/plugins/forms/selects/select2.min.js',
    'public/js/plugins/forms/styling/uniform.min.js',
    'public/js/plugins/ui/moment/moment.min.js',
    'public/js/plugins/ui/fullcalendar/fullcalendar.min.js',
    'public/js/core/app.js',
    'public/js/pages/user_pages_profile.js',
] , 'public/js/app.js');

mix.styles([
    'public/css/icons/icomoon/styles.css',
    'resources/assets/sass/app.scss',
    'public/css/core.css',
    'public/css/components.css',
    'public/css/colors.css',
],'public/css/app.css');```
<br>
Below is my app.js
<br>
```require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});```
<br>
It complains on the required,<br>
Uncaught ReferenceError: require is not defined at app.js:354 , this is the compiled app.js<br>
I have tried: <br>
1- **mix.scripts**
2- **mix.babel** (according to docs this will translate any ES2015 code to vanilla JavaScript that all browsers will understand.)
What am i missing here?