Import module after function . load() from jQuery

Question

Because it is not possible to import a module after loading an external content by jQuery.load(), from what I understand it needs to be outside the scope, but outside the scope the content of the script is not read, resulting in the error message:

Uncaught Syntaxerror: import declarations may only appear at top level of a module

The module has already been loaded on the page and works in the calls of the existing buttons, but it is not recognized in the content created in the DOM, so I thought it would be possible, but not.

Maybe there is another way to link the function to external content loaded, but what I tried was below resulting in error.

$(document).ready(function(){
    $(document).on('click','button.btn-load-items',function( event ) {          
        event.preventDefault();
        let token = $(this).data('category');
        $( 'div#load' + token ).load( 'load-items.php?token=' + token, function (e) {
            $( 'div.load-images' + token ).hide();
            $("html, body").animate({ scrollTop: $('div#load'+token).offset().top - 50 }, 500, function() {
                
                $.getScript("assets/js/velocity.min.js", function() {
                    console.log('ok');
                });
                
                /* ---------------------- AQUI -------------------------- */
                import QuantityInput from './assets/vendors/quantity-button/quantity.js';

                (function(){
                    let quantities = document.querySelectorAll('[data-quantity]');
                    if (quantities instanceof Node) quantities = [quantities];
                    if (quantities instanceof NodeList) quantities = [].slice.call(quantities);
                    if (quantities instanceof Array) {
                        quantities.forEach(div => (div.quantity = new QuantityInput(div, 'Down', 'Up')));
                    }
                })();
            });
        });
    });
});

Answer 1

So I made a quick example for you to use...

From what I saw fast in your script, does not follow the standards of import, from what I know the way you used should be started the script and not put in the body of a js script, I went through it at the beginning, so I discovered this, you can matter this way...

Links to study, MDN - import

Obs: this technique is well below in pg. of MDN. Good study!

const

// ARMAZENARA AS FUNCOES/METODOS CARREGADOS
MODULOS = {},

fc_import_m = async function (arg = false) {

  // CONDICAO CHECO VALOR DO ARG RECEBIDO
  if (!arg)

    // FUNCAO return FINALIZA PROCESSO
    return;

  // FUNCAO IMPORT MODULOS
  await import((typeof arg === 'object' && arg.hasOwnProperty ('a') ? arg.a : arg)).then((argM) => {
  // FUNCAO .then PARA RETORNO DA PROMESSA

    // LOOP PARA LISTAGEM E ARMAZENAMENTO
    for (let argV in argM) {

      // CONDICAO CHECA SE O ARMAZENAMENTO DEVE SER A PARTIR DE UMA NOVA PROP. PAI PARA VARIADOS METODOS DO MODULO
      if (typeof arg === 'object' && arg.hasOwnProperty ('m')) {

        // CONDICAO CHECA SE A PROP. JA EXISTE
        if (!MODULOS.hasOwnProperty (arg.m))

          /*
          SETO OBJ

          MODULOS[(arg.m]: obj, propriedades e valores armazenados do mudulo recebido
          */
          MODULOS[arg.m] = {};

        /*
        SETO OBJ

        MODULOS[(arg.m][argV]: obj, propriedades e valores armazenados do mudulo recebido
        */
        MODULOS[arg.m][argV] = argM[argV];

      } else {

        /*
        SETO OBJ

        MODULOS[(argV]: obj, propriedades e valores armazenados do mudulo recebido
        */
        MODULOS[argV] = argM[argV];

      }

    }

  }).catch ((argE) => {
  // FUNCAO .catch PARA RETORNO COM FALHA DA PROMESSA

    // FUNCAO throw ENVIA UM TypeError NOTIFICANDO
    throw new TypeError(`! error: contate suporte caso continue ${argE}`);

    // FUNCAO return FINALIZA PROCESSO
    return;

  });

};


/*
NomeModulo, opcional, remover caso queira que o nome da funcao no modulo seja setada
*/
fc_import_m ({m: 'NomeDoModulo', a: './modulo.js'});

fc_import_m ('./modulo.js');