Moment-timezone: Error while using moment

[sushant23]

I am getting the following error while trying to use this library in my project

Uncaught (in promise) TypeError: Cannot read property 'split' of undefined
at Object.eval (moment-timezone.js:34)
at eval (moment-timezone.js:12)
at eval (moment-timezone.js:18)
at Object../node_modules/moment-timezone/moment-timezone.js (reactBoilerplateDeps.dll.js:4931)
at __webpack_require__ (reactBoilerplateDeps.dll.js:21)
at eval (index.js:1)
at Object../node_modules/moment-timezone/index.js (reactBoilerplateDeps.dll.js:4924)
at __webpack_require__ (reactBoilerplateDeps.dll.js:21)
at eval (eval at 42 (36.chunk.js:83), :1:42)
at Object.42 (36.chunk.js:83)

[SamMatthewsIsACommonName]

Hi I was having the same issue make sure you are using at least moment 2.6.0 as in the docs

[sushant23]

I am currently using latest version i.e. 2.17.1 and I am still getting the same error

[BipinBhandari]

This issue seems to be fixed by settings moment=moment.default in moment-timezone.js line 20

}(this, function (moment) {
    "use strict";
    moment=moment.default;

Might be issue with import. Can anyone fix?

[peterjcaulfield]

I'm also experiencing this issue using es6 imports.

dep versions:

"moment": "2.17.1",
"moment-timezone": "^0.5.11",

code:

import moment from 'moment';
import 'moment-timezone';
moment.tz.setDefault('Europe/London');

Produces:

Uncaught TypeError: Cannot read property 'split' of undefined
    at Object.eval (webpack:///./~/moment-timezone/moment-timezone.js?:37)

Not 💯 on whether or not I am importing moment-timezone correctly but I couldn't find any documentation on how to handle this.

[lmammino]

Same issue here, I hope this get addressed any time soon 😞

[butterflyhug]

I'm a little confused about what is happening here. It looks like y'all are having trouble using ES6 import syntax with webpack. What I don't understand is how you're importing moment as an ES6 module in the first place -- there's absolutely nothing in our packaging that would allow you to import moment using ES6 syntax and get anything other than the normal browser global. Something is rewriting our packaging in order to achieve this result -- presumably webpack, but I've never used it so I don't really know how it works.

I'm inherently skeptical about adding code to moment-timezone to support a module system that moment and moment-timezone do not support. Many webpack users are experiencing pain with Moment's locales now, which is fundamentally rooted in the fact that we built our UMD packaging under the assumption that everyone using CommonJS is using Node (which was generally true at the time). So this time around, I really don't want to assume that everyone using ES6 is using webpack or other current-generation tools. In other words, I'd like to be convinced that this solution will always be the right thing to do to support ES6 modules, even in a future where another packaging tool decides to translate our UMD setup differently, or even in a future where Moment supports ES6 modules natively.

Could someone please explain in more detail what webpack is doing here, and why #476 would be a reasonable solution to include in moment-timezone?

[maggiepint]

For what it's worth, I'm starting a webpack project right now (like, on day 1 here). I'll pull in moment since I tend to always do so anyways and see what I can make of it.

[brinley]

Essentially the issue we have is at present is if we do something like

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

or
import moment from 'moment-timezone'

We get the exception trying to split moment.version which is undefined

Importing moment works fine but without the timezone functionality such as

import moment from 'moment'

I trust that the best way is to properly support ES6 modules but https://github.com/moment/moment-timezone/pull/476 is very non-disruptive PR as moment.version would error if its undefined.

[butterflyhug]

Sorry, I guess I was unclear. I understood that moment-timezone is getting a wrapped copy of moment in your environment, and that you want it to be unwrapped so that the plugin works correctly. What I don't understand is why moment is getting wrapped in your environment, nor do I know if there is good reason to expect this wrapping behavior to be consistent with other environments (including future tools) that implement the same goals. Without that information, I don't personally feel confident that #476 will continue to be non-disruptive as the Javascript ecosystem continues to evolve over time.

Put another way, I'm not sure whether this would be properly fixed in moment-timezone or in webpack. Absent other information, I think it sounds suspiciously like webpack might be breaking moment's perfectly-valid AMD modules in the process of translating them to ES6 modules. If that is actually what is happening, then I would prefer to have webpack fix this instead of moment. But if that's not what is going on, or if we should expect the same behavior if/when we decide to natively support ES6 modules ourselves, then we should carefully vet and move forward with a solution in moment. (And then we should share that solution with other projects that also use UMD, since they will presumably face similar issues.)

tl;dr -- Yes, I want to get your build working -- but I want to make sure we do that in a way that avoids similar issues in the future, in moment and ideally also in other libraries that use the same packaging structure. I hope we'll take the time required to sort out exactly what is going on, in order to accomplish that larger goal.

[NathanBWaters]

Seeing this problem as well.

Using the following:
"moment": "2.6.0",
"moment-timezone": "0.5.13",

[soundstripe]

It looks like this is happening because of a breaking change made in the babel6 transpiler (almost always required in webpack).

Here's the issue on babel's GitHub.

Here's a related Stack Overflow link.

Here is a babel plugin that may help.

[msonowal]

same here Please if anyone have workaround please post

[gsdnano]

The link above to https://github.com/59naga/babel-plugin-add-module-exports plus the following worked for me.

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

[carldunham]

Same. in fact, this works for me as well:

import moment from 'moment-timezone';

[rushglen]

If using in browser you have to use the moment.js file as well.... The moments homepage where you can download moment-timezone.js and moment-timezone-with-data.js does not make it clear you also need moment.js............

`

``

moment.js is available here: https://cdnjs.com/libraries/moment.js

Info found here: https://momentjs.com/docs/

[pedro-teixeira]

This hack still doesn't work for me, any other suggestion?

[henrycity]

This doesn't work for me either? Anyone figures it out yet?

[henrycity]

https://github.com/moment/moment-timezone/pull/476 this one seems to work like @BipinBhandari suggested.

[opavader]

As a temporary workaround, I have create an updated fork patched with https://github.com/moment/moment-timezone/pull/476. You can use it for now with

yarn add 'https://github.com/archsaber/moment-timezone.git#develop'

[TakanashiOuken]

Same issue 2.19.0
Seems like can not get version with moment.version
But moment.default.version can work

[SargoDarya]

Latest version also seems to break for us using Webpack. Everything was fine earlier.

[Etrimus]

I have same problem, in my case it resolve by using moment 2.18.1, not 2.19.

[dharmesh03]

@Etrimus have you fix by using moment 2.18.1?

[Etrimus]

@dharmesh03 Yes, I fixed it just now in my project (Angular 4, Webpack). In My case moment is a dependency of other npm-package, but I finded version of moment by using command npm ls, and I saw 2.19.0. So, I just set concrete version in My package.json "moment": "2.18.1" and It work.

[danjohnson95]

Was this breaking change released today? Was working fine last night, redeployed today and got this error. Spent hours debugging it

[Etrimus]

@danjohnson95 In my opinion It is 2.19.0 release of moment, not moment-timezone, released some hours ago - https://github.com/moment/moment/releases/tag/2.19.0, so You right - everything worked yesterday.

[zbennett10]

I can confirm what @Etrimus is saying - this was a wake-up call for me to rely on the '~' in front of my package version instead of the '^'

[danjohnson95]

@zbennett10 couldn’t agree more. Will be a wake up call for me too

[maggiepint]

See https://github.com/moment/moment/issues/4216 for info about problems happening due to 2.19.0 release.

[mnpenner]

I couldn't for the life of me get yarn to downgrade the moment.js version, even after deleting node_modules, yarn.lock and yarn cache clean. Switched back to npm and successfully downgraded.

The versions that work for me are:

"moment": "~2.18.1",
"moment-timezone": "~0.5.13",

[iku000888]

Thanks @mnpenner worked for me too

[brendonco]

Downgrade moment works.

moment: 2.18.1
moment-timezone: 0.5.13

[iChip]

For those using yarn take a look at using https://yarnpkg.com/en/docs/selective-version-resolutions coupled with mnpenner's suggestion above.

otherwise, moment-timezone/nodes_modules/moment will still resolve to 2.19 even if you fix your moment's version to 2.18.1.

e.g.
```json
"resolutions": {
"moment-timezone/moment": "2.18.1",
"react-date-picker/moment": "2.18.1"
}

[elambro]

I also have this on webpack on npm. It works correctly when compiling on npm run dev but when using npm run watch, I get an Uncaught TypeError: Cannot read property 'split' of undefine on moment-timezone.js:34. My npm view moment version is 2.19.3.

I've been trying (unsuccessfully) to downgrade to 2.18.1.

"moment": "^2.18.1",
"moment-timezone": "~0.5.13",

npm remove moment and npm install [email protected] --save gives me version 2.19.3. As does deleting node_modules and again npm install. Does anyone have a work around?

[aarregui]

Where do we stand on this? I know some solutions have been discussed but no action has been taken in months

[petrhanak]

I encoutered this issue with enabled jsnext:main field in webpack (react-boilerplate has it for example). Removing jsnext:main in resolve.mainFields webpack configuration solved the problem for me.

module.exports = {
  // rest of the webpack config

  resolve: {
    mainFields: [
      'browser',
      'jsnext:main', // remove this and it should work
      'main',
    ],
  }
}

[pjmartins]

Thanks @petrhanak This worked for me as well, but what side effects would it cause removing the jsnext:main line?

[petrhanak]

@pjmartins Without jsnext:main webpack doesn't load es6 code which means treeshaking won't work. That's definitely not good solution.

I dig deeper into this issue and here is minimal reproduction of the bug https://github.com/petrhanak/moment-timezone-jsnextmain-bug.

[bencooper222]

I'm having the same issue when using this with Parcel - even if I downgrade to 2.18.1

[damianobarbati]

@bencooper222 did you manage to solve somehow? It just broke somehow today with:

moment-timezone.js?7434:34 Uncaught TypeError: Cannot read property 'split' of undefined
    at Object.eval (moment-timezone.js?7434:34)

Versions:

"moment-timezone": "^0.5.14",
"moment": "^2.20.1",

[m-vdb]

none of the solutions above worked for me. This prevents me from releasing a fix in production for a bug that requires the use of moment-timezone. Is there at least a workaround that works?

[jamalx31]

I get a related error while using with webpack
Moment Timezone requires Moment.js. See https://momentjs.com/timezone/docs/#/use-it/browser/

"moment": "^2.22.2",
"moment-timezone": "^0.5.21",

on this lineif (!moment || typeof moment.version !== 'string')

[prabhjot3]

@menpenner, your fix is not working for me. Does anybody has a solution of using moment and moment-timezone.

[bencooper222]

I never managed to fix it with Parcel and I ended up adopting Luxon, because I have the luxury of not addressing super old browsers

[scottdj92]

Hey yeah I'm still seeing this issue. All the fixes posted here didn't work.

I'm using:

node: 8.11.2
parcel-bundler: ^1.7.1
moment: 2.18.1
moment-timezone: 0.5.13
typescript: ^3.1.3

code:

import moment, { Moment } from "moment";
import "moment-timezone";

error:

moment-timezone.js:34 Uncaught TypeError: Cannot read property 'split' of undefined
    at moment-timezone.js:34
    at moment-timezone.js:14

This is actually pretty disappointing, because moment is a nice library. Having moment-timezone overwrite the global scope isn't the best method, I think.

[jer-sen]

As a workaround you can replace this line https://github.com/moment/moment-timezone/blob/d0bcdcad01acece5df6988603e8cec146d78bd12/moment-timezone.js#L12 by:

module.exports = factory(require('moment').default); // Node

[pitops]

What worked for me was a combination of solutions from answers above.

Add these in package.json

"moment": "^2.18.1",
"moment-timezone": "~0.5.13"

And in my yarn resolutions

"resolutions": {
 "moment-timezone/moment": "2.18.1"
}

remove node_modules and yarn.lock and re-install. Worked like a charm

[rushglen]

I was having the exact same issue as @sushant23 - Cannot read property 'split' of undefined
This happened in an iframe within a chrome extension, on my website it worked OK. The difference being on the web site I was also pulling in jquery....
So I took the first line from the jquery file:
!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("requires a window with a document");return b(a)}:b(a)};
and placed that above the moment.js and moment-with-timezones file and Voila! no more errors!

[getnorthern]

Has there been any update on a fix for this? I've spent all day going through all the suggested solutions, none of which work. I've tried updating to latest, rolling back moment, deleting node_module and re-installing, etc. etc. without success.

[Monte9]

@carldunham's solution worked for me in my React Native app.

Before I had:

import moment from 'moment';
require('moment-timezone');

Working solution:

import moment from 'moment-timezone';

Versions:

"moment": "^2.22.1",
"moment-timezone": "^0.5.25",

[suside]

Nothing of the above works for parcel + typescript.
Workaround for me is to replace moment entirely with luxon

[thidasapankaja]

@pjmartins Without jsnext:main webpack doesn't load es6 code which means treeshaking won't work. That's definitely not good solution.

I dig deeper into this issue and here is minimal reproduction of the bug https://github.com/petrhanak/moment-timezone-jsnextmain-bug.

Is there anyway I can get this fixed and use on a react-boilerplate project?

[thidasapankaja]

Nothing of the above works for parcel + typescript.
Workaround for me is to replace moment entirely with luxon

Is there a way I can get timezone list with luxon ?

[bencooper222]

Nope, the purpose of Luxon is that it only supports browsers that have the timezone list. You can polyfill that if you'd like.

[totymedli]

For me the issue was caused by moment being mocked in the wrong way in a test.

[soullivaneuh]

This is definitely a bad export compatibility that can be fixed with ease.

I find a workaround doing simply this:

echo 'export default moment;' >> node_modules/moment-timezone/index.js;

Is it enough? :thinking:

[abrbhat]

https://github.com/react-boilerplate/react-boilerplate/issues/1569#issuecomment-312022218 This solution worked for me for react-boilerplate.

[JordanDalton]

I'm having this issue as well.

[olicooper]

In Angular 9, adding this to tsconfig.json fixed the issue for me:

{
  "compilerOptions": {
    "paths": {
      "moment": ["node_modules/moment/min/moment.min.js"]
    }
  }
}

Then import moment-timezone (my package.json just has moment-timezone@^0.5.28):

import * as moment from 'moment-timezone';

There is a console warning which isn't ideal (see this) but I haven't seen any side-effects yet.

./node_modules/moment/min/moment.min.js 1:14401-14432
Critical dependency: the request of a dependency is an expression

[cyptus]

still an issue.
only got it working with using

"moment": "2.18.1",
"moment-timezone": "0.5.13",

(Remove package-lock and node_modules to be sure)

[Hyperblaster]

still in issue.
only got it working with using

"moment": "2.18.1",
"moment-timezone": "0.5.13",

Legit, this fixed it right away for me. Thanks for saving me hours!

[iliasokolovski192]

What worked for me was a combination of solutions from answers above.

Add these in package.json

"moment": "^2.18.1",
"moment-timezone": "~0.5.13"

And in my yarn resolutions

"resolutions": {
 "moment-timezone/moment": "2.18.1"
}

remove node_modules and yarn.lock and re-install. Worked like a charm

This fixed my issue, working with Yarn, seems that adding "resolutions" is necessary.

[acanewby]

After about a billion Google searches, trying to solve this, I stumbled on the following. Like many others on this thread, I tried all of the above and nothing resolved the problem.

To summarize:

Here's what I tried first - but made no difference

(Still had Moment Timezone requires Moment.js error in browser.)

package.json (NOTE: no moment):

"moment-timezone": "^0.5.28",

*.component.ts

import * as _moment from 'moment-timezone';
// Note: no import from moment
...
myMoment(d: Date) {
        _moment.locale('en-GB');
        return _moment.tz(d, 'Europe/London').format('dddd, D MMMM YYYY, HH:mm zz');
    }

ts.config.json

{
  "compilerOptions": {
    "paths": {
      "moment": ["node_modules/moment/min/moment.min.js"]
    }
  }
}

Here's what fixed it:

I noticed that my tsconfig.json was still trying to compile for es2015. When I changed it to the following, all of a sudden my project came back to life:

"target": "es2018",

Curiously, when I set it back to es2015 to try and reproduce the original error, it was gone! I'm guessing I inadvertently forced a complete recompile and that allowed the earlier fixes to become truly effective.

If somebody who knows more about Angular/Typescript than me can figure out the effect of what I did and explain it properly to others, that would be great.

[lregaladohdez]

Same issue here.
In my case after upgrading my project from [email protected] to 2.6.11

Changing require('moment') by require('moment').default in moment-timezone.js works
but doesn't fells right

[nhhockeyplayer]

ionic angular taken down also

not fun

[cyptus]

there is an open PR since 3 years now (https://github.com/moment/moment-timezone/pull/476) - i dont think maintainers will fix this any time soon

[nhhockeyplayer]

this is moment
const hour = moment.tz(new Date(), 'America/New_York').hour()

this is luxon
const hour = DateTime.local().setZone('America/New_York').hour

npm i luxon

this is how i got around it

moment sounds like it was designed terribly and on its way out
i think the moment folks wrote luxon not sure

[nl-brett-stime]

@butterflyhug Moment gets wrapped in a property called 'default' because that's how the default exports from ES6 modules are designed to achieve backwards-compatible interop when using the commonjs module system as an output target:

https://stackoverflow.com/a/40295288/93345

[maddy619]

Hi,
I am also started experiencing this error after setting up cypress code coverage using this https://github.com/bahmutov/cypress-angular-coverage-example/tree/master/cypress

don`t know who to blame, the timezone or cypress guys, currently I am using Angular 6.x, typescript 2.9.x, cypress and its related libs as mentioned in the repo above.
@bahmutov

[netgfx]

Downgrading and locking dependency versions fixed it for me:

"moment": "2.23.0",
"moment-timezone": "0.5.23",

[maddy619]

Downgrading and locking dependency versions fixed it for me:

"moment": "2.23.0",
"moment-timezone": "0.5.23",

Thanks, it seems they have release buggy 2.25 today some hours before, reverted to 2.24.0 and 0.5.21 , its working

[developeruz]

After debugging this for several hours, I've installed "moment": "^2.25.3" and everything works now!

[k3n]

I still have problems with 2.25.3, but 2.24.0 works fine.

[soullivaneuh]

Works fine for me after an update:

moment: 2.29.1
moment-timezone: 0.5.32

Imported like that:

import * as moment from 'moment-timezone';

Gives you the possibility to use the timezone as well:

const date = moment.tz(ride.date, 'UTC').tz('Europe/Paris');

I am not pretty sure this is the way to go, but it works.