Uncaught ReferenceError: _k is not defined-CodePudding

I am trying to import a module I made, however, I cannot access the function. Js tells me that it is not defined even though it is in the html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@kagarisoft/csc/dist/css/common.min.css"
    />
    <style>
      .flex-buttons {
        display: flex;
        gap: 10px;
      }
    </style>

    <!-- my module -->

    <script type="module" src="https://cdn.jsdelivr.net/gh/Neyunse/kquery/dist/kquery.browser.min.js"></script>

    <!-- <script type="module" src="https://cdn.jsdelivr.net/gh/Neyunse/kquery/dist/kquery.module.min.js"></script> -->
  </head>

  <body>
    <div >
      <!-- All content -->
      <div >
        <button id="hot" data-tag="hot" >
          Get coffe hot list
        </button>
        <button id="iced" data-tag="iced" >
          Get coffe iced list
        </button>
        <button id="clear"  disabled>Clear List</button>
      </div>

      <ul id="coffe"></ul>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

main.js


_k().load(() => {
       _k('#hot').event('click', async () => {
            
            _k("#hot").removeClass("kg-primary")

            const { tag } = _k('#hot').getDataSet()

            _k('#coffe').removeChildrens()

            const r = await _k().remote(`https://api.sampleapis.com/coffee/${tag}`).get();
            
            r.map(r => {
                  _k('#coffe').insertHTML(`<li><b>${r.title}:</b> ${r.description}</li>`)
            })
            
            _k('#hot').disableElement(true)

            _k('#iced').disableElement(false)

            _k('#clear').disableElement(false)

      })

      _k('#iced').event('click', async () => {

            const { tag } = _k('#iced').getDataSet()

            _k('#coffe').removeChildrens()

            const r = await _k().remote(`https://api.sampleapis.com/coffee/_k{tag}`).get();
            
            r.map(r => {
                  _k('#coffe').insertHTML(`<li><b>_k{r.title}:</b> _k{r.description}</li>`)
            })
            
            _k('#iced').disableElement(true)
            _k('#hot').disableElement(false)
            _k('#clear').disableElement(false)
      })

      _k('#clear').event('click', async () => {

            _k('#coffe').removeChildrens()
          
            
            _k('#iced').disableElement(false)
            _k('#hot').disableElement(false)
            _k('#clear').disableElement(true)
      })


      
      
      console.log(_k('button').getElements())
})

this module is a mini jquery clone I made, however, I'm having problems accessing it from a .js

the compiler I used was https://rollupjs.org/

I have the feeling that it is a problem when exporting the module, however, I don't know what could be the problem.

my module src: https://github.com/Neyunse/kquery/tree/master/src/lib

CodePudding user response：

By looking at the code of the kquery library, you should either expose the _k object as a global variable inside your script:

window._k = _k;

Or store the result of the IIFE in a global variable:

const _k = (function () {
      'use strict';
      class Remote {
      ...
      return _k;
})();

Otherwise, the variable _k only lives inside the private scope of the IIFE and cannot be accessed in the outer scopes.

Update: you can also do it by passing the --name parameter to rollup (preferred):

npx rollup main.js --file ../../dist/kquery.browser.min.js  --format iife --name _k

This will automatically export the _k variable as a global object accessible to all scripts.