How should I use moment-timezone with webpack?

In using webpack to build my project, I typically require modules in CommonJS from npm modules. I need moment-timezone in my project, however in building the package you must also build all the data from moment-timezone, which can be quite a lot.

Additionally the build is failing with the following error:

ERROR in ./~/moment-timezone/data/packed/latest.json
Module parse failed: /site/node_modules/moment-timezone/data/packed/latest.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| 	"version": "2015a",
| 	"zones": [
| 		"Africa/Abidjan|LMT GMT|g.8 0|01|-2ldXH.Q",
@ ./~/moment-timezone/index.js 4:15-51

At this point I am not as concerned with the build failing, as I am about the size of the build if it actually succeeds. Though, obviously the failing build will need to be addressed too at some point.

I would appreciate any pointers on how to handle this, especially if any of you have encountered this same issue using webpack (or browserify too, probably).

You can fix this by adding the JSON loader to your webpack configuration.

$npm install json-loader

And add it to your loaders in webpack.config.js. Don't forget to add the extension as well.

{
  module: {
    loaders: [
        {include: /\.json$/, loaders: ["json-loader"]}
    ]
  },
  resolve: {
    extensions: ['', '.json', '.jsx', '.js']
  }
}

If you're using webpack 2.x (currently in beta)

npm install json-loader

then include this in your rules

{
    test: /\.json$/,
    loader: "json-loader"
}