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

score 86 · Accepted Answer · answered Apr 21 '15 at 12:04

86

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

answered Apr 21 '15 at 12:04

Jeroen Coumans

884
7
2

1

This worked for me after removing the `resolve` portion. – Alex Cory Sep 01 '16 at 01:53
2

I had a bit of a "this doesn't work" derp moment - turns out that was because my setup used webpack's dllPlugin to cache dependencies, and I was putting this in the wrong file. Adding it the to webpack *dll* config file and then "npm run build:dll" did the trick for me. As a heads up in case someone has a similar moment. – DrShaffopolis Mar 14 '17 at 18:32
1

or a similar moment-timezone! Ha - Ha, sorry :( – Nicola Pedretti Jul 20 '17 at 13:29

score 14 · Answer 2 · answered Nov 24 '16 at 10:16

14

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

answered Nov 24 '16 at 10:16

William S

881
6
17

Thank you. This worked for. I added the package with Yarn then added the rule into my webpack.config file. – Yuschick Aug 13 '17 at 10:29

How should I use moment-timezone with webpack?

2 Answers2

Linked