Using CommonJS modules with rollup

[shlomiassaf]

@adamdbradley I think you closed #3 in a rush.

angularfire2 and firebase are something you can't ignore when thinking ionic...

It's also not specific to them, it's a problem when using rollup, I think the rollup process needs to handle commonJS directories transparently.

I now have another, similar error with lodash

When I:

import { assign } from 'lodash';

I get:

[14:02:04]  bundle failed:  Error: Module /app/node_modules/lodash/lodash.js does not export assign (imported by /app/.tmp/data-source/some.service.js)

Again, there is a workaround but ionic developer shouldn't get hard time on simple tasks:

import assign from 'lodash/assign';

This is not perfect, there is a TS error:

[14:14:40]  src/data-source/feeding.service.ts(5,8): error TS1192: Module '"lodash/assign"' has no default export.

There's a switch in error between the 2, when TS is happy rollup isn't and vice versa.

BTW, rollup does a wired thing when doing:

import * as assign from 'lodash/assign';

assign will be the module, with a default property which is the assign function...

error_handler.js:45 EXCEPTION: Error in ./HomePage class HomePage - inline template:17:10 caused by: assign$2 is not a function

I know you considered #3 as someone else's problem but app-scripts is part of the ionic CLI and if the integration is not smooth you'll get ton's of complaints.
If you integrate rollup you need it to be transparent.

[danbucholtz]

Hi @shlomiassaf,

We're not sure what you mean. We do support commonjs as we are using the latest version of the commonjs plugin.

https://github.com/driftyco/ionic-app-scripts/blob/master/config/rollup.config.js#L37

Please let me know if this fixes your issue. I'll re-open if needed.

Thanks,
Dan

[shlomiassaf]

@danbucholtz Why did you close the issue? is this a common behaviour for people contributing to your project? You didn't solve it...

Now, before you run and close try to look into the issue.

I kindly ask you to try and integrate angularfire2 or lodash.

I'm trying to save you a lot of time and complaints later on, I'v spent a lot of hours on this beta, this is not how you should treat people who try to help.

This is insulting

Jus to clarify, the reason I react like that is that the same error was closed in #3 without a solution...

[shlomiassaf]

Here's another issue for you:

In watch mode when using skip property in the nodeModules plugin for rollup (within rollup.config.js) the skip is only valid for the first run.

Save something and the next update will error since using cache for rollup causes an issue.
If you disable caching everything is fine, but you can't do that without changing the code of this lib.

I'v managed to workaround the angularfire issue and now this cache thing you introduced broke it...

I know sometime people pollute the issues but this is not the case, anyone who could use the beta.12 without docs should be taken seriously, its across 4 repos of integration.

[danbucholtz]

Hi,

I am seeing an issue here. I'll look into it. The goal is the user doesn't need to care if a 3rd party lib is commonjs or es2015 modules.

Thanks,
Dan

[shlomiassaf]

I know it's the goal and I also now that you'll get tons of complaints for these 2 libs only...

I'm trying to help.

[mlynch]

@shlomiassaf we're looking into it and taking it seriously. This needs to Just Work or it won't be acceptable on our end. Apologies for the confusion.

[shlomiassaf]

@danbucholtz @mlynch This is really a core issue with the rollup bundling process.
I can't import major libraries.

Now moment is giving me hard time, see this issue comment, I can run in dev but I can't build to a device.

BTW, I had to use moment since the Intl polyfil is not present so iOS safari can't run angular 2 if for example i'll use the date pipe.

[danbucholtz]

Hi @shlomiassaf,

We are aware of this issue and working on it. I don't have more to share right now but I hope to soon.

Thanks,
Dan

[danbucholtz]

Hi @shlomiassaf,

I have successfully created a project with moment, lodash, node-uuid, localforage. All commonjs modules. You're right there is an issue here. I've come up with a solution. I'll have more details on it tomorrow.

In the meantime, the code changes to app-scripts to facilitate it are here:
#29

Thanks,
Dan

[shlomiassaf]

@danbucholtz thanks!

I couldn't load moment via

import * as moment from 'moment'

I had to use default syntax:

import moment from 'moment'

This requires

    "allowSyntheticDefaultImports": true,

in tsconfig.json

Problem is i'm getting a new error now, in runtime...
I'm pretty sure it's not related to your change but if you have clues it will be great

EXCEPTION: Error in ./IonicApp class IonicApp - inline template:0:34 caused by: No provider for ParamDecorator!ErrorHandler.handleError @ error_handler.js:45
error_handler.js:47ORIGINAL EXCEPTION: No provider for ParamDecorator!ErrorHandler.handleError @ error_handler.js:47

[danbucholtz]

@shlomiassaf,

Nice find with the allowSyntheticDefaultImports option. I'll play around with it - this sounds like the secret sauce that we need to make things work the way we want!

I'll have an update coming soon.

Thanks,
Dan