How to import/require a npm module

[glaucocustodio]

Short description of the problem:

I have an app running at 2.0.0-beta.11 version and now I am migrating to 2.0.0-rc.0.

I am importing my installed modules like PouchDB (that was installed via npm installl pouchdb) through let PouchDB = require('pouchdb'); however the same code does not work on the rc version, I just get require is not defined (I already have typings installed).

I know a lot of changes were made from a version to another (Angular 2.0 final, TypeScript 2) etc and I would like to know how I should proceed now.

I read that on TS 2 I should import using the new ES syntax like import * as PouchDB from 'pouchdb' but this way (and alternatives) I just get Cannot find module 'pouchdb'.

Thank you for the great work, you are amazing.

What behavior are you expecting?

Be able to import a npm module installed at node_modules.

Steps to reproduce:

1. Start a brand new ionic 2 rc app
2. Install any npm module
3. Try to import it

Which Ionic Version? 2.x

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

Cordova CLI: Not installed
Gulp version: CLI version 1.2.2
Gulp local:
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X Yosemite
Node Version: v5.2.0
Xcode version: Xcode 7.2 Build version 7C68

[calebkiage]

I also wonder how to do this especially for pouchdb. I had to reference it manually into my index.html file and add the declaration declare var PouchDB: any on all the pages I used it on. :-/
I noticed that this issue doesn't affect all node modules. For example lodash and momentjs work fine when you import them.

[ramonornela]

See https://github.com/driftyco/ionic-third-party-lib-example

[danbucholtz]

I am going to write a blog on this very subject shortly.

Here are a few key points:

1. Make sure allowSyntheticDefaultImports is set to true in the tsconfig.json compilerOptions.
2. Install the library (lodash is this example)

npm install lodash --save --save-exact

1. Install type definitions

npm install @types/lodash --save-dev  --save-exact

1. If a type definition is not found the library, we'll have to create a declarations.d.ts file in /src, so ${PROJECT_ROOT}/src/declarations.d.ts
2. Enter a shorthand module declaration in the ${PROJECT_ROOT}/src/declarations.d.ts file

declare module 'lodash'

1. In the page/component/directive/pipe, import the library like this:

import lodash from 'lodash'

ionViewDidEnter() {
   lodash.capitalize('hurray, the lib works!');
}

This pattern should work for the vast majority of libraries out there. If the library is newer and written in es2015/Typescript, often times you can import libraries like this:

import { someFunction } from 'someLib'

This method above is more desirable because excess code can be removed via tree-shaking.

Thanks,
Dan

[morious]

AS far as I know ionic now uses npm@types instead of typings.
I migrated away from typings using npm@types and changed my import declarations, to this syntax:
import PouchDB from 'pouchdb'

[danbucholtz]

@morious said in a different thread:

I am trying to use an npm package that has no corresponding typings file, hence I cannot use an 'import' statement that later most likely participates in the bundling process.

I could not find a documentation to what is the recommended approach by ionic given the new build process in RC0.

The quickest thing I could think of would be to use a 'declare var' statement and an npm task to copy the js file to the www folder.

What approach would you recommend to this?

[danbucholtz]

I would create a declarations.d.ts file in /src, so ${PROJECT_ROOT}/src/declarations.d.ts.

I would create an implicit any type definition for the module by entering the following:

declare module 'myLibraryWithoutTypes'

I would then go to my page/component/whatever, and import the library like this:

import myLib from 'myLibraryWithoutTypes'

...

ionViewDidEnter() {
   myLib.someAwesomeFunction();
}

This comment a few posts up includes additional details.

Please let me know if this works for you.

Thanks,
Dan

[morious]

@danbucholtz ,
Thanks for the quick response.
I tried your approach a few posts up and when it did not work I figured it would be worth a new thread. :)

this is the error i am getting:
Error: Module ...\node_modules\rollup-plugin-node-resolve\src\empty.js does not export __moduleExports (imported by commonjs-proxy:...\node_modules\paper\dist\node\window.js)

It is not so clear but I think it is caused by an empty module declaration?
WDYT?

[danbucholtz]

What does your import statement look like?

Do you have allowSyntheticDefaultImports set to true in your tsconfig.json's compilerOptions?

Thanks,
Dan

[allangomes]

this error occurs to me

Could not resolve 'pouchdb'

[02:08:39]  typescript compiler ready in 3.99 s
[02:08:39]  bundle dev started ...
[02:08:43]  Error: Could not resolve 'pouchdb' from /Users/allan/dev/lov/.tmp/app/utils/repository/LocalRepository.js
    at Error (native)
    at /Users/allan/dev/lov/node_modules/rollup-plugin-node-resolve/dist/rollup-plugin-node-resolve.cjs.js:78:21
    at /Users/allan/dev/lov/node_modules/browser-resolve/index.js:265:24
    at /Users/allan/dev/lov/node_modules/resolve/lib/async.js:46:14
    at process (/Users/allan/dev/lov/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/allan/dev/lov/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/allan/dev/lov/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/allan/dev/lov/node_modules/resolve/lib/async.js:92:31)
    at /Users/allan/dev/lov/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

[manuelroth]

I get exactly the same error as @allangomessl.

1. allowSyntheticDefaultImports is set to true
2. Installed pouchdb: npm install pouchdb --save --save-exact
3. Installed typings: npm install @types/pouchdb --save-dev --save-exact (Deleted the old typings.json file, and typings directory before)
4. Imported like this in my provider: import * as PouchDB from 'pouchdb';
5. ionic serve results in this error:

[11:16:06]  Error: Could not resolve 'pouchdb' from /Users/foobar/dev/test/.tmp/providers/Service.js
    at Error (native)
    at /Users/foobar/dev/test/node_modules/rollup-plugin-node-resolve/dist/rollup-plugin-node-resolve.cjs.js:78:21
    at /Users/foobar/dev/test/node_modules/browser-resolve/index.js:265:24
    at /Users/foobar/dev/test/node_modules/resolve/lib/async.js:46:14
    at process (/Users/foobar/dev/test/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/foobar/dev/test/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/foobar/dev/test/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/foobar/dev/test/node_modules/resolve/lib/async.js:92:31)
    at /Users/foobar/dev/test/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:123:15)

Would really appreciate any help on this.

[workfluo]

Dan,
Please don't forget to mention to update Node and Npm.
Or there is a risk of error in case of "npm install @types/lodash --save-dev --save-exact " because of write-rights.

(I lost a day on this)

[cambronjay]

I found that rollup changes the way things are imported.
What it used to be: import * as io from 'socket.io-client';
What it is now: import io from 'socket.io-client';
Now I did this after following the changelog instructions and updating everything. Be sure to uninstall the old ionic and then reinstall it. At the end of the day I found it better to just remake the app in a new project rather than try to upgrade it. Afterall, ionic was in beta and now is in rc!

[glaucocustodio]

I've followed all your steps @danbucholtz and this way I just get:

Error: Could not resolve 'pouchdb-node' from /Users/foo/myapp/node_modules/pouchdb/src/pouchdb.js.

Have you tried to import PouchDB specifically?

It seems that many people are facing issues when importing modules. A blog post/tutorial would be nice given that it does not to seem to be that simple.

Thank you again.

[morious]

@danbucholtz ,
I am trying to use paper-js.
So my import looks like that:

declare module 'paper'

...

import paper from 'paper'

Thx!