How should I use moment-timezone with webpack?

jaredkwright picture jaredkwright · Apr 9, 2015 · Viewed 18.1k times · Source

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

Jeroen Coumans picture Jeroen Coumans · Apr 21, 2015

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