$('#load') cause: Uncaught ReferenceError: $ is not defined

Question

I have next html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/main.js"></script>
  </head>

<body>
     
<button type="button" class="btn btn-outline-warning"
  onclick='debugger;lazy_load( $("#load") )'
>Primary</button>

<div id="load">
  <div data-lazy-load="ajax/data-ajax.json">Loading...</div>
  <div data-lazy-load="ajax/data-ajax.html">Loading...</div>
</div>

  </body>
</html>

import { ajax_query } from "../common/ajax";

export function lazy_load( container ) {
  container ||=  $('#load');
  ...
}

webpack.config.js has:

  plugins: config.scripts.isUseJquery
    ? [
        new webpack.ProvidePlugin({
          jQuery: "jquery",
          jquery: "jquery",
          $: "jquery",
          "window.jQuery": "jquery",
          "window.jquery": "jquery",
          "window.$": "jquery",
        }),
      ]
    : [],
};

When I open this page I get Uncaught ReferenceError: $ is not defined near this code lazy_load( $("#load") ).

When I remove parameter $("#load") then same code inside lazy_load works fine.

Even when script execution stop at debugger, I can run $("#load") at console without any error!

Why onclick='lazy_load( $("#load") )' does not work?

UPD

When I replace onclick: onclick='lazy_load()'

You typically see this when jQuery is not present/linked to. — Rob Moll, Sep 24 '21 at 14:26
@RobMoll: jQuery is linked. You can see that $('#load') is working fine inside `lazy_load` function and at console. Why `jQuery` is not linked to main page? — Eugen Konkov, Sep 24 '21 at 14:31
Have you tried `console.log(jQuery);`? Is that available? Maybe your code loads before jQuery? — Peter Krebs, Sep 24 '21 at 14:31
@PeterKrebs: it is available from inside `lazy_load` but not from main page (see updated question) — Eugen Konkov, Sep 24 '21 at 14:38
Thanks for the screenshots. I'll post a suggestion as an answer. May not be the solution but maybe it helps. — Peter Krebs, Sep 24 '21 at 14:42
I would suggest not using `onclick` with modules. It's a bit like having a manual crank starter hooked up to a Ferrari. Instead, use `addEventListener` to attach the event listener with the appropriate scope. — Heretic Monkey, Sep 24 '21 at 14:55
@HereticMonkey: unfortunately modules does not know where event should be added. this knowledge belongs to the main page. So I expose $ (see answer below) — Eugen Konkov, Sep 25 '21 at 07:53

score 0 · Answer 1 · answered Sep 24 '21 at 14:44

0

When coding with modules, you should also import jQuery explicitly:

import $ from "jquery";
import { ajax_query } from "../common/ajax";

export function lazy_load( container ) {
  container ||=  $('#load');
  ...
}

Otherwise see more possible solutions here:
How to import jQuery in webpack

answered Sep 24 '21 at 14:44

Peter Krebs

3,831
2
15
29

Following your link, `import $ from "jquery"` is not required because of `ProvidePlugin`. And as you can see from question at this module `$('#load')` works fine. The problem is with index.html which does not see $ – Eugen Konkov Sep 24 '21 at 15:25
Oh right, if you have that sure. Why don't you move that code to a module as well? – Peter Krebs Sep 24 '21 at 15:41
Because index.html know the ID of element to find, not the module – Eugen Konkov Sep 24 '21 at 15:45
Seems I found solution, see answer below – Eugen Konkov Sep 25 '21 at 07:50

score 0 · Answer 2 · answered Sep 25 '21 at 07:49

To make $ global I must to expose it.

So I install expose-loader and adjust my webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: 'expose-loader',
        options: { exposes: [ '$', 'jQuery' ] },
      },
    ],
  }
}

Notice: for webpack 5 there is different config format, so I install expose-loader version 1.0.3

$('#load') cause: Uncaught ReferenceError: $ is not defined

2 Answers2