Webpack and JS scripts

I want to migrate a website (a simple one) from its current structure to Laravel's logic (MVC, etc).

Right now I am linking CSS and JS the old classic way, but moving to Laravel I want to do this through Laravel Mix.

This is my code:

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

mix.copy('node_modules/jquery/dist/jquery.min.js', 'resources/assets/js/libs');
mix.copy('node_modules/jquery-mobile/dist/jquery.mobile.min.js', 'resources/assets/js/libs');
mix.copy('node_modules/font-awesome/fonts','public/fonts/font-awesome');
mix.copy('node_modules/npm-modernizr/modernizr.js', 'resources/assets/js/libs');
mix.copy('node_modules/wowjs/css/libs/animate.css', 'resources/assets/css/libs');
mix.copy('node_modules/wowjs/dist/wow.min.js', 'resources/assets/js/libs');
mix.copy('node_modules/foundation-grid/grid.css', 'resources/assets/css/libs');
mix.copy('node_modules/reset-css/reset.css', 'resources/assets/css/libs');
mix.copy('node_modules/snapsvg-cjs/dist/snap.svg-cjs.js', 'resources/assets/js/libs');


mix.babel([
    'resources/assets/js/libs/modernizr.js',
    'resources/assets/js/libs/jquery.min.js',
    'resources/assets/js/custom/jquery.mobile.min.js',
    'resources/assets/js/libs/wow.min.js',
    'resources/assets/js/libs/snap.svg-cjs.js',
    'resources/assets/js/custom/contact.js',
    'resources/assets/js/custom/main.js',
    'resources/assets/js/custom/preloader.js'
    
], 'public/js/all.js');

mix.styles([
    'resources/assets/css/libs/animate.css',
    'resources/assets/css/libs/grid.css',
    'resources/assets/css/libs/reset.css',
    'resources/assets/css/custom/animation.css',
    'resources/assets/css/custom/contact.css',
    'resources/assets/css/custom/contest.css',
    'resources/assets/css/custom/learn-more.css',
    'resources/assets/css/custom/preloader.css',
    'resources/assets/css/custom/privacy.css',
    'resources/assets/css/custom/style.css'
], 'public/css/all.css');

When I run:

npm run dev 

Everything is OK.

Then I link both CSS (head) and JS (before closing body) scripts like this:

Head:

<link rel="stylesheet" type="text/css" href="{{ asset('/css/app.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('/css/all.css') }}">

Before body closing:

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

As soon as I load the page I get the following error:

Uncaught TypeError: Cannot read property 'document' of undefined

This error seems to be situated into Modernizr.js script, but I am pretty sure that if I remove modernizr from the equation I get the error for the next JS script (wow.js).

What is causing this issue?

Thanks in advance.