Moment-timezone: Angular 4.3.1 - Uncaught TypeError: Cannot read property 'length' of undefined at addZone (moment-timezone.js:380)

[brandonwilliams]

Can anyone figure this one out?
Got this error after updating a few things in an Angular 4.3.1 project generated by Angular CLI 1.2.3 (updates included the cli itself). Installed moment-timezone via NPM. I tested it on a fresh project and it worked fine, but I'm wondering what possibly went wrong and I'm not eager to port all my existing code to the new project. I tried uninstalling/reinstalling the package to no avail.

My call:
formatTime(time){ return moment.utc(time).tz("America/New_York").calendar(); }

Error snippet:
moment-timezone.js:380 Uncaught TypeError: Cannot read property 'length' of undefined at addZone (moment-timezone.js:380) at Function.loadData [as load] (moment-timezone.js:453) at Object.../../../../moment-timezone/index.js (index.js:2) at __webpack_require__ (bootstrap f6bc467…:54)

*EDIT:
I still can't figure out what's going on from the error. If anyone wants to take a crack at this, go ahead, but for anyone that had the same problem, simply creating a new project and porting the components, packages, and custom files is probably the best and quickest solution.

[nixegend]

The same problem

import moment from 'moment';
import 'moment-timezone';

  const jun = moment('2014-06-01T12:00:00Z');
  const dec = moment('2014-12-01T12:00:00Z');

  jun.tz('America/Los_Angeles').format('ha z');  // 5am PDT
  dec.tz('America/Los_Angeles').format('ha z');  // 4am PST

moment-timezone.js:380 Uncaught TypeError: Cannot read property 'length' of undefined
    at addZone (moment-timezone.js:380)
    at Function.loadData [as load] (moment-timezone.js:453)
    at Object.<anonymous> (index.js:2)
    at __webpack_require__ (bootstrap a4c0b16…:555)
    at fn (bootstrap a4c0b16…:86)
    at Object.<anonymous> (calcTimeToDepartureIn.js:2)
    at __webpack_require__ (bootstrap a4c0b16…:555)
    at fn (bootstrap a4c0b16…:86)
    at Object.defineProperty.value (CollapsiblePanel.js:3)
    at __webpack_require__ (bootstrap a4c0b16…:555)

[FredericBernardo]

This is a webpack configuration issue, not related to this package.
You can probably solve it by using the json-loader for these kind of files.
In your webpack config:

  module: {
    rules: [
      { test: /\.json$/, loader: 'json-loader' }
    ]
  }

[marbletravis]

with webpack 3 I am experiencing the same issue regardless of whether or not I have the json-loader.

According to the webpack 3 migration guide the json loader is not required.
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

That being said, I can acknowledge that this might be a configuration issue with webpack, but the json loader is not the workaround.

The workaround that worked for me was to:

import moment from 'moment-timezone/builds/moment-timezone-with-data-2012-2022.min'; // Adds ~503kb

in my code.

[jintoppy]

I think this needs to be re-opened. What @marbletravis mentioned above works. But, importing with build file name is very bad in my opinion.

[marbletravis]

@jintoppy Totally agree, above should just be considered a workaround. However I am still unsure if it is an issue with Moment-Timezone or if its with Webpack 3. I haven't had a chance to check Webpack 4.

[rbinsztock]

I added a custom loader in webpack 4 config to fix it, I don't want to update all imports.

{
  test: /\.json$/,
  use: { loader : 'json-loader' } ,
  type: "javascript/auto"
}