TypeError: window.jQuery(...).maphilight is not a function / Make it work with import 'jquery'; from npm

[TylerRick]

Someone asked:

I'm trying to implement your angular-maphilight directive into my application, but I'm always getting this error:

ERROR TypeError: window.jQuery(...).maphilight is not a function

I tried to solve this by declaring window. jQuery as a global namespace, by doing the following:

import * as jQuery from 'jquery';
window.jQuery = jQuery || {};

also this:

import * as jQuery from 'jquery';
(window as any).jQuery = jQuery;

but none of these worked, what do you recommend me to do?

[TylerRick]

I assume the problem is that you're trying to import jQuery from the npm package. I don't actually know why that wouldn't work the way you tried it. Maybe someone else could explain why it doesn't?

All I can say is that the only way I have used this component so far is in a project that already had jQuery available globally on window in a non-npm-import sort of way. You can also see an example of that on the example page (https://tylerrick.github.io/angular-maphilight/#/example2):

<!-- jQuery -->
--
  | <script src="https://unpkg.com/[email protected]"></script>
  | <script src="https://rawcdn.githack.com/kemayo/maphilight/7932449fbc49c7767fbd72a807110c632c11ee95/jquery.maphilight.js"></script>

However, as I mentioned on https://github.com/TylerRick/angular-maphilight, I would love it if someone figured out how to get it to work to use npm only to load those 2 dependencies.

Dependencies

• jQuery (tested with 3.1.1)
• David Lynch's Maphilight jQuery plugin
  Both are currently assumed/required to be available in the global namespace (window.jQuery) but a pull request that makes it use import and npm packages would be gladly accepted if you can get that to work.

If you figure it out, please post here and if possible submit a pull request.

In the meantime, you may have to resort to including jQuery via a script tag.

[TylerRick]

Oh, I just re-read the error message, and I see that it's not complaining about jQuery itself, but about jQuery(...).maphilight not being a function.

See, Maphilight is jQuery plugin that you need to load in addition to core jQuery. Did you import/include the Maphilight jQuery plugin??

I don't even know if there is a way to make a jQuery plugin as a npm package, but you could research and find out, and if it is possible, if there's not already a npm package for the Maphilight jQuery plugin, you could add one :)

[RabeeAbuBaker]

Hi @TylerRick , I am the one who sent the email about this issue.
well.. you're right, the issue was that JQuery is being imported from the npm package via Angular CLI. To solve the issue I had to import it using a script tag in html.

Regarding the Maphilight plugin , I imported it via npm and everything is working fine now.

The error message was because JQuery was not defined globally correctly as window.jQuery and maphilight was not accessible.

[TylerRick]

Glad you got it working!

[vallikumar]

Hi @TylerRick , I am the one who sent the email about this issue.
well.. you're right, the issue was that JQuery is being imported from the npm package via Angular CLI. To solve the issue I had to import it using a script tag in html.

Regarding the Maphilight plugin , I imported it via npm and everything is working fine now.

The error message was because JQuery was not defined globally correctly as window.jQuery and maphilight was not accessible.

I have the same issue now,
Can you help me with how you solved it ?
I mean how you import maphilight through npm?

Regards,
Valli

[RabeeAbuBaker]

Hi @TylerRick , I am the one who sent the email about this issue.
well.. you're right, the issue was that JQuery is being imported from the npm package via Angular CLI. To solve the issue I had to import it using a script tag in html.
Regarding the Maphilight plugin , I imported it via npm and everything is working fine now.
The error message was because JQuery was not defined globally correctly as window.jQuery and maphilight was not accessible.

I have the same issue now,
Can you help me with how you solved it ?
I mean how you import maphilight through npm?

Regards,
Valli

Hi,
Import jQuery using a script tag in html.
Install maphilight via npm

That simple :)

[ScripTech]

It works

[telco2011]

Hi, I've installed jquery and maphilight via npm and put them into the angular.json scripts tag and it works with angular 10:

...
"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/maphilight/jquery.maphilight.min.js",
              ...
            ]
...