RC.0: How do use PouchDB? Problem with require()


#1

I’m working on an app using PouchDB for local storage following this tutorial. Now I’m trying to update to RC.0 without success.

Here are the main steps I tried:

ionic start myApp --v2 --ts
ionic plugin add cordova-plugin-sqlite-2
npm install pouchdb --save
typings install dt~require --global --save

If I try to use PouchDB with require()

let PouchDB = require('pouchdb');

inside my provider like before, I get the following error:

error TS2304: Cannot find name 'require'.

If I try use PouchDB without require()

import * as PouchDB from 'pouchdb';

inside my provider, I get the following error:

error TS2307: Cannot find module 'pouchdb'.

Can you help me. Without an solution, I can’t continue with my work. Thanks in advance!


Using plugin Crypto-Pouch with PouchDB in RC0: Uncaught TypeError
#2

I use the following workaround:

In package.json, add the following dependency, devDependencies and config:

{
  ...
  "dependencies": {
    ...
    "pouchdb": "^6.0.6",
    ...
  },
  "devDependencies": {
    ...
    "rollup-plugin-json": "^2.0.2",
    "rollup-plugin-node-builtins": "^1.2.1",
    "rollup-plugin-node-globals": "^1.0.9",
    ...
  },
  ...
  "config": {
    "ionic_rollup": "./config/rollup.config.js"
  },
  ...
}

Add a file config/rollup.config.js:

var ngTemplate = require('../node_modules/@ionic/app-scripts/dist/plugins/ng-template').ngTemplate;
var nodeResolve = require('rollup-plugin-node-resolve');
var builtins = require('rollup-plugin-node-builtins');
var commonjs = require('rollup-plugin-commonjs');
var globals = require('rollup-plugin-node-globals');
var json = require('rollup-plugin-json');

// https://github.com/rollup/rollup/wiki/JavaScript-API

var rollupConfig = {

  /**
   * entry: The bundle's starting point. This file will
   * be included, along with the minimum necessary code
   * from its dependencies
   */
  entry: './.tmp/app/main.dev.js',

  /**
   * sourceMap: If true, a separate sourcemap file will
   * be created.
   */
  sourceMap: true,

  /**
   * format: The format of the generated bundle
   */
  format: 'iife',

  /**
   * dest: the output filename for the bundle in the buildDir
   */
  dest: 'main.js',

  /**
   * plugins: Array of plugin objects, or a single plugin object.
   * See https://github.com/rollup/rollup/wiki/Plugins for more info.
   */
  plugins: [

    ngTemplate(),
    builtins(),
    json(),

    nodeResolve({
      main: true,
      module: true,
      jsnext: true,
      browser: true,
      extensions: ['.js', '.json']
    }),

    commonjs({
      namedExports: {
        'node_modules/js-extend/extend.js': ['extend']
      }
    }),

    globals()
  ]

};

if (process.env.IONIC_ENV == 'prod') {

  // production mode
  rollupConfig.entry = '.tmp/app/main.prod.js';

}

module.exports = rollupConfig;

And change the following:

import * as PouchDB from 'pouchdb'

into:

import PouchDB from 'pouchdb'

You still have a typescript error when linting, but for me this worked and I can use the PouchDB.


#3

I tried your solution and it seems to work. But I hope that’s not the final solution.


#4

I gave up making the import work. I sure lost my patience before trying to configure rollup :slight_smile:

however, this works for me without too much hassle:

  1. add “pouchdb”: “^6.0.6” in package.json

  2. install typings

    typings install --global --save dt~pouchdb dt~pouchdb-adapter-websql dt~pouchdb-browser dt~pouchdb-core dt~pouchdb-http dt~pouchdb-mapreduce dt~pouchdb-node dt~pouchdb-replication

  3. reference typings

    /// <reference path="…/…/…/typings/index.d.ts"

  4. *EDIT: include pouchdb script reference in index.html

Typings still miss some declarations like query though. Tried this only in ionic serve so far, but it worked.


#5

Sorry, but I don’t know what you mean by “reference typings”. Can you help me? Thanks in advance!


#6

after you install typings, just paste the following line at the beginning your .ts file:

/// <reference path="../../../typings/index.d.ts" />

note, that it is the relative path of the typing .d.ts file so it may vary depending on your directory structure.


#7

You might need to modify the rollup.config.js file even further to include a moduleName property.

moduleName: ‘yourBundleName’


#8

This article might help


#9

Excellent !, i was be able to solve pouchdb import with this article :slight_smile: many thanks :+1:


#10

This article was a great help for me, too! Thank you very much!

But I got an error first like:

bundle failed: Module myApp/node_modules/js-extend/extend.js does not export extend (imported by myApp/node_modules/pouchdb/lib/index-browser.es.js)

I found a solution by some modifications to the rollup process at this in the section “Third Party Modules Export Errors”.

But after solving the last problem, I have a new one: How to use crypto-pouch in rc0? In the past I used:

var PouchDB = require(‘pouchdb’).plugin(require(‘crypto-pouch’));

In rc0 I don’t know how to include/use this plugin.


#11

That article’s suggestions didn’t work for me (still get the “extend.js does not export extend” error). It also has typos and invalid JSON in the example values. Does anybody have a working code example?


#12

@fulekia the page does work, but it misses one change. you have to swap
var ngTemplate = require('../dist/plugins/ng-template').ngTemplate;
for
var ngTemplate = require('../node_modules/@ionic/app-scripts/dist/plugins/ng-template').ngTemplate;
at the top

Edit: check out https://github.com/driftyco/ionic/issues/8356


#13

Thanks for the suggestions in this thread. I’m having a few issues though. Followed all the official (and unofficial) suggestions, but still…

[17:08:44]  rollup: Treating 'events' as external dependency
[17:08:44]  rollup: Treating 'stream' as external dependency
[17:08:44]  rollup: Treating 'util' as external dependency
[17:08:44]  rollup: Treating 'timers' as external dependency

[17:08:50]  rollup: No name was provided for external module 'events' in options.globals – guessing 'events'
[17:08:50]  rollup: No name was provided for external module 'stream' in options.globals – guessing 'stream'
[17:08:50]  rollup: No name was provided for external module 'util' in options.globals – guessing 'util'
[17:08:50]  rollup: No name was provided for external module 'timers' in options.globals – guessing 'timers'

… which at first glance seems fine: "Hey rollup-plugin-node-resolve has detected some node globals used in this ancient node module I’m using, great."
But then when I’ve built to my device, the bundled js throws: ReferenceError: Can't find variable: events

I can do the named exports (which shouldn’t be required for builtin node modules), but that doesn’t make a difference.

Doing a bit more digging, I can get rid of all those errors if I manually add the two plugins: rollup-plugin-node-globals and rollup-plugin-node-builtins. Then I (maybe) get a bit further, and now the app throws:
TypeError: undefined is not an object (evaluating 'superCtor.prototype') which has me stumped atm.

Any suggestions? Feel like I have to be a rocket scientist to work with these module bundlers. :smile:


#14

If someone still needs a solution, here is the working setup for Pouchdb+Pouchdb-find on Ionic2 RC0:


#15

Thanks for this link, but I’ve found this a few days ago. I tried it and with PouchDB-Find it works for me, but not with Crypto-Pouch. I’m getting the following error:

Uncaught TypeError: Cannot read property ‘listenerCount’ of undefined stream_readable.js:38


#16

I have same issue with other npm module. It seems, that old modules need to fix manually for typescript 2+ (in your case in stream_readable.js line 38 change listenerCount to window.listenerCount. or maybe author forgot “var” before listenerCount).

If it helps - you can create an issue about this to module author or fork project, fix it and use link on your fork in package.json