Ionic-framework: import moment-timezone rollup issue

[aggarwalankush]

Short description of the problem:

I'm importing moment-timezone but it's giving below rollup.js error

SyntaxError: Unexpected token (2:10) in /Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/moment-timezone/data/packed/latest.json
    at Parser.pp$4.raise (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:4072:13)
    at Parser.pp.unexpected (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:2270:8)
    at Parser.pp.semicolon (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:2247:59)
    at Parser.pp$1.parseExpressionStatement (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:2662:8)
    at Parser.pp$1.parseStatement (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:2427:20)
    at Parser.pp$1.parseBlock (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:2677:23)
    at Parser.pp$1.parseStatement (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:2401:31)
    at Parser.pp$1.parseTopLevel (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:2315:23)
    at Parser.parse (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:2182:15)
    at parse (/Users/annaggarwal/Documents/IdeaProjects/RimsMobile/node_modules/rollup/dist/rollup.js:4972:37)

What behavior are you expecting?

No errors

Steps to reproduce:

import moment from "moment";
import "moment-timezone";
moment.tz.setDefault("America/Los_Angeles");

Which Ionic Version? 1.x or 2.x
Ionic 2 rc0

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

Cordova CLI: 6.3.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

[jwenzler]

I also had this issue, for now I just stuck the moment timezone JS into assets and loaded on index.

[ganySA]

+1

[danbucholtz]

This is importing json, yes? We will need to support that.

CC: @adamdbradley

Thanks,
Dan

[aggarwalankush]

@danbucholtz Yes I think you are right. I found a related stackoverflow question http://stackoverflow.com/questions/29548386/how-should-i-use-moment-timezone-with-webpack

But how was it working in beta 11?

[danbucholtz]

In beta.11 we were using browserify which supports a lot of that stuff by default. There is a plugin for Rollup to do the same, we just need to test it out and verify that it works.

Thanks for letting us know about this one!

Thanks,
Dan

[aggarwalankush]

@danbucholtz Thanks for the quick reply. Once you figure it out, would you please let us know the workaround in rc0 till the time it comes in future releases?

[mlynch]

Closing since we have a discussion going on at https://github.com/driftyco/ionic-app-scripts/issues/16#issuecomment-250944328

[mlynch]

To follow up and add to what @danbucholtz said, we're seeing some fallout from the fact that some of these modules, like moment-timezone, required special plugins/loaders to handle some non-JS imports they were making. It happened to Just Work before, but that says more about browserify and webpack than it does about Rollup. We just need to make sure we have some of those proper defaults and then this won't be an issue with Rollup.

I know it's annoying and we definitely understand this and feel it, but we think making these changes now is necessary to build the best experience that maximizes standards-compliance, performance, user experience, and maintainability. Sometimes those tradeoffs result in issues like this and we're working hard to bring back some balance without throwing away all the assumptions we're making about the future of JS and TS tooling.

Also @aggarwalankush how were you getting moment-timezone to work with TypeScript anyways? I tried it out and couldn't get typescript to be okay with Moment having a tz property. I had to do (moment() as any).tz.

[aggarwalankush]

@mlynch Actually the beta 11 code that I have in production right now has following:

import * as moment from "moment";
var momentTimeZone = require("moment-timezone");
momentTimeZone.tz.setDefault("America/Los_Angeles");

and using it like

 static getUpdateTimeString(): string {
       return momentTimeZone().format("MM/DD/YY HH:mm:ss");
 }

If I use same code in rc0, I'm getting following error

Uncaught ReferenceError: require is not defined

I found following stackoverflow answer to import moment-timezone http://stackoverflow.com/a/30633077/4017375

[danbucholtz]

@aggarwalankush,

Can you run npm install @types/node and then in your tsconfig.json make sure it has an entry in the compilerOptions types arrow for node?

{
  "compilerOptions": {
    "declaration": true,
    "lib": ["dom", "es2015"],
    "module": "es2015",
    "target": "es5",
    ...
    "types": [
      "node"
    ]
    ...
  },
  ...
}

Give that a shot and see if that works for you. We may need to add that as a default if others are using require in their TS code.

Thanks,
Dan

[joshgarwood]

@mlynch many thanks for the update here! I can definitely appreciate the need to make changes like this, and sometimes taking one step back to take two steps forward. To @danbucholtz point in commonjs issue thread, I think the biggest gap for many of us is the lack of documentation on issues like this. Perhaps it would be helpful to have a list of "gotchas" in the rc0 changelog, along with remediation steps as they become available.

Also, I should note how grateful I am that y'all have made yourselves available to respond to these issues; it's definitely helpful. Looking forward to the road ahead!

[aggarwalankush]

@danbucholtz no effect, same Uncaught ReferenceError: require is not defined

[aggarwalankush]

@danbucholtz @mlynch Can you please suggest some temporary workaround to import moment-timezone? I downloaded moment-timezone.js and added script in index.html but didn't work.

[danbucholtz]

@aggarwalankush,

Try the suggestions I supplied here. Most libraries work without issue following this pattern.

Please let me know how it goes.

Thanks,
Dan

[aggarwalankush]

@danbucholtz that didn't work. This library is loading a json and as you said rollupjs doesn't have json loader.
https://github.com/moment/moment-timezone/blob/master/index.js

[danbucholtz]

Ahh, that's right. We need to add support for that. I'll track that here.

https://github.com/driftyco/ionic-app-scripts/issues/69

Thanks,
Dan

[danbucholtz]

All,

We've posted some docs on the subject. Note: They match a version of @ionic/app-scripts that will be dropped in the next day or so. 95% of the concepts still apply.

http://ionicframework.com/docs/v2/resources/third-party-libs/
http://ionicframework.com/docs/v2/resources/app-scripts/

Here's an example with AngularFire2.
Here is a project I implemented that has every library in it that Ionic users have reported trouble with. Most of the libraries worked, but a couple did not. Here is the summary of the findings.

Please let me know how everything goes.

Thanks,
Dan