jQuery maphilight with parcel bundler - ".maphilight is not a function"

Viewed 39

I am trying to run the jQuery maphilight plugin demo via the Parcel script "scripts":{"start": "parcel docs/demo_world.html"} in the package.json file. I am using the maphilight demo project downloaded from https://github.com/kemayo/maphilight which works fine using live server, but when I use the Parcel script above I get the following errors in dev tools:enter image description here

I've just taken the maphilight demo in the link above, run npm i parcel-bundler --save-dev and added the scripts in the package.json file below.

Is this even going to be possible with Parcel? Any info would be greatly appreciated! Thank you.

The full package.json looks like:

{
  "name": "maphilight",
  "version": "1.4.2",
  "title": "maphilight",
  "author": {
    "name": "David Lynch",
    "email": "kemayo@gmail.com",
    "url": "http://davidlynch.org"
  },
  "repository": "https://github.com/kemayo/maphilight.git",
  "licenses": [
    {
      "type": "MIT",
      "url": "MIT-LICENSE.txt"
    }
  ],
  "dependencies": {
    "jquery": "^3.0.0"
  },
  "scripts": {
    "start": "parcel docs/demo_world.html",
    "build": "parcel build docs/demo_world.html --public-url.",
    "build:archive": "ch5-cli archive -p npm_practice_v1 -d dist -o output"
  },
  "description": "a plugin that adds visual hilights to image maps",
  "keywords": [
    "map",
    "imagemap",
    "hilight",
    "highlight",
    "jquery-plugin",
    "ecosystem:jquery"
  ],
  "homepage": "https://github.com/kemayo/maphilight",
  "main": "jquery.maphilight.min.js",
  "devDependencies": {
    "grunt": "^1.0.4",
    "grunt-contrib-jshint": "^2.1.0",
    "grunt-contrib-uglify": "^4.0.1",
    "grunt-contrib-watch": "^1.1.0",
    "parcel-bundler": "^1.12.5"
  }
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery maphilight documentation</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../jquery.maphilight.min.js"></script>
    <script type="text/javascript">$(function() {
        $('.map').maphilight({fade: false});
    });</script>
</head>
<body>...

</body>
</html>
0 Answers
Related