ionic-framework: PouchDB not working with RC0 due to Rollup+CommonJS

Hello all! We have made some great progress and now have a working example of PouchDB with Ionic 2 RC.0. We are still throwing around ideas and reviewing this, but it looks like the key is to use namedImports in our rollup.config. I will share more once we have gone over all this. Thanks!

The circular dependency issue, and the fact that @calvinmetcalf was not able to find a solution via Rollup’s plugin system, leads me to believe that this is best solved by either 1) using Webpack/Browserify instead of Rollup, or 2) using Rollup in a very limited way (to produce a small CJS bundle), and then following up with Webpack/Browserify. I would recommend making the change to ionic-app-scripts’ bundle.ts.

I just released PouchDB 6.0.7. Our solution was to drop the js-extend dependency because Rollup can’t seem to handle it.

It’s not an ideal solution, but PouchDB now works out-of-the-box with Ionic 2. You can get the fix by merely doing npm update.

I’ll close this issue because the title itself is no longer applicable. The core problem still exists (e.g. if any Ionic users actually legitimately do want to use js-extend or similar modules with tricky export patterns) but I’ll leave it up to Ionic/Rollup if they’d like to fix the root problem.

Another possibility would be for the ionic-app-scripts to include a small whitelist of modules that are known to play nice with Rollup, and then use Browserify/Webpack for the rest.

are there any workarounds?

@audan2009 It worked for me. You have to update to @ionic/app-scripts because v0.0.27 doesn’t set up the process.env.IONIC_ENV correctly. With the latest version you have to remove ngTemplate from your config.

Here’s what worked for me:

npm install --save pouchdb
npm install --save pouchdb-quick-search
npm install --save-dev rollup-plugin-node-builtins
npm install --save-dev rollup-plugin-node-globals
npm install --save-dev rollup-plugin-json
npm install js-extend
npm install @types/pouchdb

I use pouchdb-quick-search but there are no typings for it, so I manually created:

node_modules/@types/pouchdb-quick-search/index.d.ts:

declare module 'pouchdb-quick-search' {
  var PouchQuickSearch: any;
  export = PouchQuickSearch;
}

I edited node_modules/@ionic/app-scripts/config/rollup.config.js with this: https://gist.github.com/shaggy8871/7cd2d8222ae67b2bf6d8d141f1d9c07c

I edited node_modules/rollup-plugin-node-builtins/dist/rollup-plugin-node-builtins.es6.js and node_modules/rollup-plugin-node-builtins/dist/rollup-plugin-node-builtins.cjs.js (didn’t know which is being used) by commenting out this line:

//libs.set('crypto', require.resolve('crypto-browserify'));

I also changed my require(‘pouchdb’) and require(‘pouchdb-quick-search’) calls to:

import PouchDB from 'pouchdb';
import PouchDB_Plugin_QuickSearch from 'pouchdb-quick-search';
PouchDB.plugin(PouchDB_Plugin_QuickSearch);

Some of these steps may not be necessary, but they worked for me 😃 Hope it helps someone.

@matheusgarcez’s approach didn’t work for me 😞