RC0: "Error: Could not resolve" with external npm dependecy

Ionic Framework ionic-v3
1

I use PouchDB in one of my projects, which I’d like to upgrade to RC0. Before I could just npm install pouchdb, then add import * as PouchDB from 'pouchdb'; to my providers. Now I get Error: Could not resolve 'pouchdb' from /path/to/compiler/provider.js

Anybody else having trouble with external deps in RC0? Did I miss a doc update on what to do? My googling keeps coming back Mike H’s blog post, which is now wicked old, in Ionic years :grin:

3 Likes
2

It’s happening with me too.

It seems like a conflict with PouchDB Build.

Libraries:

  • npm install pouchdb-browser
  • npm install pouchdb-find

Framework:

Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Windows 10 Pro
Node Version: v6.7.0

Stack Trace:

[00:03:02]  bundle dev started ...
[00:03:08]  rollup: Treating 'events' as external dependency
[00:03:09]  rollup: Treating 'crypto' as external dependency
[00:03:09]  rollup: Export 'plugin' is not defined by 'C:\ionic\.tmp\app\app.component.js'

Error: Module C:\ionic\node_modules\js-extend\extend.js does not export extend (imported by C:\ionic\node_modules\pouchdb-browser\lib\index.es.js)
at Module.trace (C:\ionic\node_modules\rollup\dist\rollup.js:7677:29)
at ModuleScope.findDeclaration (C:\ionic\node_modules\rollup\dist\rollup.js:7300:22)
at Scope.findDeclaration (C:\ionic\node_modules\rollup\dist\rollup.js:5351:39)
at Scope.findDeclaration (C:\ionic\node_modules\rollup\dist\rollup.js:5351:39)
at CallExpression.bind (C:\ionic\node_modules\rollup\dist\rollup.js:5826:28)
at C:\ionic\node_modules\rollup\dist\rollup.js:5151:50
at VariableDeclarator.eachChild (C:\ionic\node_modules\rollup\dist\rollup.js:5168:5)
at VariableDeclarator.bind (C:\ionic\node_modules\rollup\dist\rollup.js:5151:7)
at C:\ionic\node_modules\rollup\dist\rollup.js:5151:50
at VariableDeclaration.eachChild (C:\ionic\node_modules\rollup\dist\rollup.js:5165:19)

app.component.ts:

import { Component } from "@angular/core";
import { Platform } from "ionic-angular";
import { StatusBar } from "ionic-native";
import { TabsPage } from "../pages/tabs/tabs";

import * as PouchDB from 'pouchdb-browser';
import * as PouchDB_Plugin_Find from 'pouchdb-find';

@Component({
    template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {

    rootPage = TabsPage;

    constructor(platform: Platform) {
        platform.ready().then(() => {

            // Configure PouchDB Plugins
            PouchDB.plugin(PouchDB_Plugin_Find);

            // Ignored...
        });
    }
}
3

Having the same problem using Linux and nvm.

4

(PouchDB co-author here.)

The issue is that PouchDB contains a mix of ES6 modules and CommonJS modules. To be used with Rollup, you’ll have to use Rollup plugins like rollup-plugin-node-resolve and rollup-plugin-commonjs in order to handle CommonJS dependencies. In the case of PouchDB, you might also find rollup-plugin-node-resolve-auto very useful, since it automatically ignores CommonJS dependencies.

Another option is to import the CommonJS version of PouchDB, using import PouchDB = require('pouchdb') instead of import * as PouchDB from PouchDB.

5

Nevermind, I cannot figure out a way to solve this. I tried var PouchDB = require('pouchdb'), import PouchDB = require('pouchdb') and a few other combinations, and nothing is working. It complains that it’s an ES6 module and can’t be imported as a CommonJS module:

[06:44:52] src/app/app.module.ts(8,1): error TS1202: Import assignment cannot be used when targeting ECMAScript 2015 modules. Consider using ‘import * as ns from “mod”’, ‘import {a} from “mod”’, ‘import d from “mod”’, or another module format instead.

Maybe PouchDB just screwed up and we shouldn’t have shipped a jsnext:main at all. :confused: Some discussion here: PouchDB not working with RC0 due to Rollup+CommonJS · Issue #8356 · ionic-team/ionic-framework · GitHub

6

@nolanlawson is unreasonably on top of things. You make the rest of us look bad, dude :innocent:

7

lol I am most certainly not on top of this; I am flailing around like a fish on dry land. :stuck_out_tongue:

8

Yeah, i think it’s not a easy bug to solve…

9

So we can not use pouchdb at all with Ionic 2 rc0? Is that what is happening?

10

If you follow the discussion on github it seems like they found some sort of solution, by changing the rollup bundle process. I will wait until it is easier to do :wink:

Just for testing at the moment I include PouchDB as an external script tag in my htm(as a global variable)l. It’s not for production but enough to continue using it.

11

Could you share the code how you do that by including it as extenal script tag?

12

I just use the cdn version, of course you could download the file and use the local path
In your index.html

<script src="//cdn.jsdelivr.net/pouchdb/6.0.5/pouchdb.min.js"></script>

Now the global PouchDB variable is available. I wouldn’t recommend it for production though :wink: