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