Having trouble importing PouchDB into an Angular 5.2.0 project

Question

Struggling with integrating PouchDB into my Angular project, I've experimented with various import methods :

import PouchDB from 'pouchdb';
import * as PouchDB from 'pouchdb';

In my service, I'm utilizing it like this :

database: PouchDB.Database = new PouchDB(DATABASE_URL);

When using import PouchDB from 'pouchdb', the error message displayed is:

src/app/core/pouchdb/pouchdb.service.ts(3,8): error TS1192: Module '"{PATH_OF_PROJECT}/node_modules/@types/pouchdb/index"' has no default export.

And when using

import * as PouchDB from 'pouchdb'

, the error message shown is:

ERROR TypeError: PouchDB is not a constructor at new PouchDBService

Here are the versions of the packages involved :

Your assistance is greatly appreciated.

Answer 1

Answer №1

To enable synthetic default imports, make sure to include

"allowSyntheticDefaultImports": true

within the compilerOptions area of your tsconfig.json.

Follow this setup:

import PouchDB from 'pouchdb';

Answer 2

To enable synthetic default imports, make sure to include

"allowSyntheticDefaultImports": true

within the compilerOptions area of your tsconfig.json.

Follow this setup:

import PouchDB from 'pouchdb';

Answer 3

Facing a similar issue, I managed to overcome it by incorporating the PouchDb cdn into my index.html file

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

Subsequently, I implemented it within my code in the following manner

declare const  PouchDB;

const _DB_ = new PouchDB('dbname');

Answer 4

Facing a similar issue, I managed to overcome it by incorporating the PouchDb cdn into my index.html file

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

Subsequently, I implemented it within my code in the following manner

declare const  PouchDB;

const _DB_ = new PouchDB('dbname');