Using jvectormap with webpack

Question

I'm trying to using the jvectormap with webpack to develop some web applications.

However, I can show the vector map in normally.

But the zoom function is not working.

Here is my index.js:

import "jquery";
import "jquery.cookie";

import "jvectormap-next";
import "./node_modules/jvectormap-next/jquery-jvectormap.css"

require("./jquery-jvectormap-world-mill");

$(document).ready(function(){
    $('#world-map').vectorMap({
        map: 'world_mill',
        normalizeFunction: 'polynomial',
        zoomOnScroll: true,
        markerStyle: {
            initial: {
                fill: '#00FF00',
                stroke: '#383f47'
            }   
        },
        markers: [
            {latLng: [42.5, 1.51], name: 'Andorra'}
        ]
    });
});

And the webpack.config.js:

var webpack = require('webpack')
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }, {
        test: /\.html$/,
        loader: 'raw-loader'
      }, {
        test: /\.(jpe?g|png|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/, 
        loader: 'url-loader?limit=100000'
      }, {
        test: /\.js$/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            }
        ]
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin('Add innodisk license here'),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new HtmlWebpackPlugin({
        template: './index.html'
    }),
    new webpack.ProvidePlugin({
      "$":"jquery",
      "jQuery":"jquery",
      "window.jQuery":"jquery"
    })
  ]
}

And it's a snapshot of the error.

Could anyone can help me? Or give me some hint to research. Thanks!

---

Edit 1 : Here is package.json :

{
  "name": "jvectormap-webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --colors",
    "build": "webpack --config webpack.config.prod.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/eva70881/jvectormap-webpack-test.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/eva70881/jvectormap-webpack-test/issues"
  },
  "homepage": "https://github.com/eva70881/jvectormap-webpack-test#readme",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "billboard.js": "^1.2.0",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.7.1",
    "css-loader": "^0.28.8",
    "datatables.net": "^1.10.16",
    "datatables.net-dt": "^1.10.16",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "font-awesome": "^4.7.0",
    "font-awesome-webpack": "0.0.5-beta.2",
    "google-maps": "^3.2.1",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2.1",
    "jquery-mapael": "^2.1.0",
    "jquery-mousewheel": "^3.1.13",
    "jvectormap": "^2.0.4",
    "jvectormap-next": "^3.0.0",
    "less": "^2.7.3",
    "paginationjs": "^2.1.2",
    "raphael": "^2.2.7",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.0"
  },
  "dependencies": {
    "jquery-mapael": "^2.1.0",
    "jquery.cookie": "^1.4.1",
    "jvectormap": "^2.0.4"
  }
}

Since it's copied from another internal project, so it may have some unused packages.

Thanks!

Answer 1

I tried with your code and use the file jquery-jvectormap-world-mill-en I get from github. But it seem working fine. Could you provide also your package.json?

EDIT: Try to remove options: { presets: ['es2015']} If you don't use ES6. If you want to use babel to transform, try to follow babeljs.io/docs/plugins/#presets