var undefined between two required files

Hi everybody,

I try to compile my js file using laravel-mix.

I have 2 files cleanZone.js and funeral-manager.js.

1. cleanZone.js is the main js that declare a var called App with all the main functions.
2. funeral-manager.js add some functions to App

My problem is that after compiling with laravel-mix my variable 'App' is undefined for all the functions of funeral-manager.js.

if i load 2 separated js files everything works fine.

My webpack.min.js:

const {mix} = require('laravel-mix');
const WebpackShellPlugin = require('webpack-shell-plugin');

mix.autoload({
    jquery: ['$', 'window.jQuery']
});

/*
 |--------------------------------------------------------------------------
 | 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/global.js', 'public/js/app.js');

if (mix.inProduction() || process.env.npm_lifecycle_event !== 'hot') {
    mix.version();
}
//
mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    query: {
                        presets: ['flow']
                    }
                }
            }
        ]
    },

});

my first declaration of App in ClearZone.js :

    console.log('In cleanZone');


var App = (function () {

  var config = {//Basic Config
    animate: false,
    popover: true,
    assetsPath: 'assets',
    imgPath: 'img',
    jsPath: 'js',
    libsPath: 'lib',
    tooltip: true
  };

  function toggleSideBar(_this){
    var b = $("#sidebar-collapse")[0];
    var w = $("#cl-wrapper");
    var s = $(".cl-sidebar");
    
    if(w.hasClass("sb-collapsed")){
      $(".fa",b).addClass("fa-angle-left").removeClass("fa-angle-right");
      w.removeClass("sb-collapsed");
    }else{
      $(".fa",b).removeClass("fa-angle-left").addClass("fa-angle-right");
      w.addClass("sb-collapsed");
    }
  }
....
  

my first declaration of App in funeral-manager.js :

console.log(' dans le funeral-manager asset');
console.log(App);
var App = (function () {
    console.log(' dans le App de  funeral-manager asset');
    console.log(App);
    let storage = $.localStorage;
    let container = $('#pcont');
    let audio_notification = new Audio('//cdn.funeralmanager.rip/assets/sounds/notification.mp3');

    let form_ajax = null;
.....

the Compiled app.js where the var App is undefined.

 $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });
    }
  };
}();
console.log(App);  //********************  App is wel defined as an object
console.log(typeof App === 'undefined' ? 'undefined' : _typeof(App));
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__("./node_modules/jquery/dist/jquery.js")))

/***/ }),

/***/ "./resources/assets/js/funeral-manager.js":
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function($) {var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _typeof = typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol" ? function (obj) {
    return typeof obj === "undefined" ? "undefined" : _typeof2(obj);
} : function (obj) {
    return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof2(obj);
};

console.log(' dans le funeral-manager asset');
console.log(App); //******************** App is undefined  
var App = function () {
    console.log(' dans le App de  funeral-manager asset');
    console.log(App);//******************** App is undefined  
    var storage = $.localStorage;
    var container = $('#pcont');
    var audio_notification = new Audio('//cdn.funeralmanager.rip/assets/sounds/notification.mp3');

    var form_ajax = null;

    __processAjaxReponse = function __processAjaxReponse(data) {

        form_ajax = null;

It's clear that js not recognize my var when compiling 2 js.