Promise.resolve() is not a function error angular 4

[lakinmohapatra]

I am using this library as

import Relational from 'relational-pouch';
PouchDB.plugin(Relational);

Its showing Promise.resolve() is not a function console error.

Please help.

[EvansMatthew97]

To get around this problem I commented out line 3 in lib/pouch-utils.js

'use strict';

//var Promise = require('pouchdb-promise'); <-- commented out
/* istanbul ignore next */
exports.once = function (fun) {

Not sure what the actual problem is, though.

[dmitri-wm]

Same problem with angular 4 and ionic 2. @MrPutuLips comment helps, but it's not a good idea to comment out script :)
code sample which causes this error

import { Injectable } from '@angular/core';
import PouchDB from 'pouchdb';
import * as cordovaSqlitePlugin from 'pouchdb-adapter-cordova-sqlite';
import * as relationalPouch from 'relational-pouch'

@Injectable()

export class DbConnector{
  private db = null;

  public connect(){
    PouchDB.plugin(cordovaSqlitePlugin);
    PouchDB.plugin(relationalPouch);
    PouchDB.debug.enable('*');

    this.db = new PouchDB('gre-app');
    this.setSchema();
  }

  private setSchema() {
    this.db.setSchema([
        { singular: 'department', plural: 'departments' }
      ])
  }

  public getDb(){
    return this.db
  }
}

[dmitri-wm]

Think found where exactly issue is.
Here is used CommonJs require https://github.com/pouchdb-community/relational-pouch/blob/master/lib/pouch-utils.js#L3
And 'pouchdb-promise' which is required written with ES6 and exported as default.

So proper syntax will be
not

var Promise = require('pouchdb-promise')
but
var Promise = require('pouchdb-promise').default;

I saw there is https://github.com/59naga/babel-plugin-add-module-exports but can't setup it so it could help here.

Any ideas?

@lakinmohapatra did you sort out issue?

[danobot]

Facing this same problem.

[broerse]

We updated pouchdb-promise to the newest version in v3.0.0

We like to know if this solves this issue.

[Prabuganesan]

I have update version 3.0.0. But still this issue not solved.

[broerse]

@Prabuganesan Thanks for testing. I will try to understand what is wrong. I don't use Angular and Ember is not showing this error so not sure where the bug is coming from.

[humbertocruz]

Here too with NextJS

[jlami]

@dmitri-wm is correct. This module is not ES6 yet and should respect the fact that pouchdb-promise is. So a .default after the require is the correct way to go for now.

[jlami]

I think this is a transpile problem. Our tests wont work with .default and the browserified version in /dist should also be correct without it.

But since ES6 is the future, it might be a good idea to rewrite this whole plugin and setup js:next in package.json which should help those that expect ES6 modules. Otherwise the babel plugin that @dmitri-wm mentioned seems good

I saw there is https://github.com/59naga/babel-plugin-add-module-exports but can't setup it so it could help here.

But I don't know anything about angular and how it transpiles, so I'm sorry I can't help there.

[tim-field]

Same issue in a React project using Create React App

[tim-field]

This might be a silly question but can't we just rely on native promises now ?
https://github.com/pouchdb-community/relational-pouch/blob/master/lib/pouch-utils.js#L3 ( just removing this line fixes everything up for me )

If you don't have promise support in your target build in 2018 then chances are that you are already polyfilling them earlier in your build step ?

[luca147]

The only solution is changing relational-pouch/lib/pouch-utils.js line 3: var Promise = require('pouchdb-promise');

to this: var Promise = require('pouchdb-promise').default;

????

Thanks!

[Prabuganesan]

Yes.... Still now not found other solution....

…

On 30 April 2018 at 08:34, luca147 ***@***.***> wrote: The only solution is changing relational-pouch/lib/pouch-utils.js line 3: var Promise = require('pouchdb-promise'); to this: var Promise = require('pouchdb-promise')*.default*; ???? Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#86 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOLoZ2Jm43keyF4WVezvhq2fPUcdYjwAks5ttn9WgaJpZM4PQGGP> .

-- Thanks, Prabuganesan

[luca147]

: ( very bad....

how can we work with this solution, so that all the members of the team can have that change without needing to modify it each one of them???

[luca147]

Well i decided i will not use this plugin, it have lot of bugs, i think use only pouch is more efficient.
Thanks

[509dave16]

@luca147 You will need to create a fork of this repo and modify it yourself to have the change like what @rwein did in his fork: https://github.com/rwein/relational-pouch/commit/6b525a3ca3eea891a4a12c3b195e7c730be67e80

Then install the package using the github repo.

Or simply use the fork I pointed out in the link above.

This way you and all your team members should have the change.

[luca147]

@509dave16 thx man, I decided not to use the plugin, as I told you in the other thread.. thx a lot

[liquid36]

I made a webpack alias to the browser version file. Like this:

alias: {
  'pouchdb-promise': path.join(__dirname, '../node_modules/pouchdb-promise/lib/index.js')
},

[fpfarina]

@liquid36 good solution!! What it's great, no need to fork or make changes to the source code! Thx!

[p4bl1t0]

@liquid36 where do you put that alias?

[liquid36]

Here!
It's depends on your webpack configurations.

[freddydrodev]

@liquid36 where do you put that alias?

Hi guy I know it's a bit late but I have just faced the issue and base on #86 (comment). This is how I have managed:
I am using create-react-app
I have installed react-app-rewired react-app-rewire-aliases in order to be able to modify it. check the docs for more info:

yarn add react-app-rewired react-app-rewire-aliases -D

but basicaly this is the code to put in config-overrides.js in your root folder

const rewireAliases = require("react-app-rewire-aliases");
const path = require("path");

module.exports = function override(config, env) {
  config = rewireAliases.aliasesOptions({
    "pouchdb-promise": path.join(
      __dirname,
      "/node_modules/pouchdb-promise/lib/index.js"
    )
  })(config, env);

  return config;
};

[easychen]

@liquid36 where do you put that alias?

Hi guy I know it's a bit late but I have just faced the issue and base on #86 (comment). This is how I have managed:
I am using create-react-app
I have installed react-app-rewired react-app-rewire-aliases in order to be able to modify it. check the docs for more info:

yarn add react-app-rewired react-app-rewire-aliases -D

but basicaly this is the code to put in config-overrides.js in your root folder

const rewireAliases = require("react-app-rewire-aliases");
const path = require("path");

module.exports = function override(config, env) {
  config = rewireAliases.aliasesOptions({
    "pouchdb-promise": path.join(
      __dirname,
      "/node_modules/pouchdb-promise/lib/index.js"
    )
  })(config, env);

  return config;
};

this works for me . if you use customize-cra , config-overrides.js might like this :

const {
    override,
   ...,
    addWebpackAlias
  } = require("customize-cra");

const path = require("path");
  
  module.exports = {
    webpack: override(
        addWebpackAlias({"pouchdb-promise": path.join(
          __dirname,
          "/node_modules/pouchdb-promise/lib/index.js"
        )})
    )
  };

[twincle]

Here's a workround:

    const utils = require('relational-pouch/lib/pouch-utils.js');
    utils.Promise = window.Promise;
    PouchDB.plugin(require('relational-pouch'));

You can manully change the default Promise object before PouchDB plugin it.
This is because angular uses ZoneAwarePromise as the default Promise.
Normally, it will work fine. But in some unknown (just I don't know) reasons, ZoneAwarePromise become a module with a default property who wraps the real ZoneAwarePromise Object.