How should I use moment-timezone with webpack?

Question

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).

Answer 1

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']
  }
}

Answer 2

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"
}