Load/Include Custom Javascript file


I have a question about include system, I have various js files, they contain various functions, I need include some of this files globally, and other files in some specific pages.

Im usig Framework7 Core + Webpack

About the files I want be avaiable in all pages I addedd this to app.js

import CoreUtils from '../js/lib/utils.js';


Then about the other files I want in a specific page I added this code into the router.js :

function loadLibJS(moduleNames) {
  var modulesToLoad = moduleNames.map((moduleName) => {
    return import(`../js/lib/${moduleName}.js`);
  return Promise.all(modulesToLoad)
    .then((modules) => {
      return app.loadModules(modules.map(module => module.default));

Then into router I added:

async: function (routeTo, routeFrom, resolve, reject) {
      // load modules
      loadLibJS(['WavAudioEncoder.min', 'wav']).then(() => {
        // resolve route
          component: HomePage,

But when I go to compile and test:

Uncaught (in promise) ReferenceError: consoleMessage is not defined

the consoleMessage it’s a variable/function into utils.js , what I wrong? How I can include custom js and make the functions avaiable to the scope?

I have the same issue, I am new with F7, I have try many ways to use custom javascript and always get undefined.