Module name "jquery" has not been loaded yet for context: _. Use require

Question

I am trying to migrate my Javascript files to Typescript files, however I am stuck when I try to use the transpiled javascript file in html page and get the following error:

https://requirejs.org/docs/errors.html#notloaded
at makeError (require.min.js:1)
at Object.s [as require] (require.min.js:1)
at requirejs (require.min.js:1)
at helloworld.js:4

My Typescript file

import * as $ from "jquery";

export class Loading {
  public showLoadingModal(msg?: string) {
    if (msg === undefined) {
  msg = "Loading ...";
    }
    $("#dialog1 label").html(msg);
    //$('#pleaseWaitDialog').modal({ backdrop: 'static', keyboard: false });
  }

  public hideLoadingModal() {
    // $('#pleaseWaitDialog').modal('hide');
  }

  public keepOpenLoadingModal() {
    $("#dialog1").on("hide.bs.modal", function () {
      return false;
    });
    this.showLoadingModal();
  }
}

Transpiled Javascript file

"use strict";
exports.__esModule = true;
exports.Loading = void 0;
var $ = require("jquery");
var Loading = /** @class */ (function () {
    function Loading() {
    }
    Loading.prototype.showLoadingModal = function (msg) {
        if (msg === undefined) {
            msg = "Loading ...";
        }
        $("#dialog1 label").html(msg);
        //$('#dialog1').modal({ backdrop: 'static', keyboard: false });
    };
    Loading.prototype.hideLoadingModal = function () {
        // $('#dialog1').modal('hide');
    };
    Loading.prototype.keepOpenLoadingModal = function () {
        $("#dialog1").on("hide.bs.modal", function () {
            return false;
        });
        this.showLoadingModal();
    };
    return Loading;
}());
exports.Loading = Loading;

I have loaded the Jquery from CDN like below

    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title></title>
        <base href="/" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
          crossorigin="anonymous"
        />
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
        <script>
          var exports = {};
        </script>
        <script src="helloworld.js"></script>
      </head>
      <body>
        <h3 class="text-center mt-2 mb-2">Demo</h3>
      </body>
    </html>

I also tried loading the jquery with below code but no luck

      var exports = {};
      requirejs.config({
        baseUrl: "/js/lib",
        paths: {
          jquery: "jquery.min",
        },
      });
      requirejs(["jquery"], function (jquery) {
        console.log(jquery); // OK
      });
    </script>```
Can you please help me resolve the error, I know this is very first step in my migration journey and I am badly stuck here, any help is much appreciated.

score 0 · Accepted Answer · answered Sep 08 '21 at 14:03

0

You've transpiled the code from TypeScript to CommonJS.

Browsers don't support the CommonJS module system, they only support the ECMAScript module system.

The requirejs library you use only supports the AMD module system.

You should fix this at the point you transpile the code. You need to target browsers. This is most commonly done using Webpack which has a loader for TypeScript modules.

Aside: If you're importing (and thus bundling) jQuery then you should not also load it from a CDN.

answered Sep 08 '21 at 14:03

Quentin

914,110
126
1,211
1,335

thanks for your reply. If I configure transpile part with webpack as suggested by you, then how the dependencies will be taken care for Jquery or Bootstrap.js? will it be taken care by webback itself? – Yashpal S Sep 08 '21 at 15:11
You `import`ed jQuery so jQuery will be included in the bundle produced by Webpack. – Quentin Sep 08 '21 at 15:12
Great, So it means where I need to consume the bundle file there I need not to worry about the query or Bootstrap.js. Also will it be possible if I can create separate js files for each ts file? when I do build from webpack project or it will be a single bundle containing all the ts files? – Yashpal S Sep 08 '21 at 15:14
Thanks for prompt reply, I will give it a try and may bother if I stuck. – Yashpal S Sep 08 '21 at 15:23
One more help/query, suppose if I have bundle created with the help of the webpack and I have loaded the bundle.js file in html page. Now if I need to use the classes created from that bundle.js file then how it needs to be referred? Suppose if I have a class ShowLoading in ShowLoading.ts file and I would like to use it out of that bundle.js. – Yashpal S Sep 08 '21 at 16:53
Generally: Don't. Let the top of the bundle be the entry point. Don't try to create globals which are accessible outside it. That said: https://stackoverflow.com/a/40416826/19068 – Quentin Sep 08 '21 at 16:57
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/236909/discussion-between-yashpal-s-and-quentin). – Yashpal S Sep 08 '21 at 17:20

Module name "jquery" has not been loaded yet for context: _. Use require

1 Answers1