Ionic-framework: Getting : Uncaught TypeError: t.resolve is not a function

[HamzaLJ]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ X ] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[ X ] bug report
[ ] feature request

Current behavior:
When running ionic serve on the browser if I do a right click, I get the following :

polyfills.js:3 Uncaught TypeError: t.resolve is not a function
    at Object.setNativePromise (polyfills.js:3)
    at L.configurable.L.set (polyfills.js:3)
    at new Synchronizetion (index.js:37)
    at handleEvent (index.js:106)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at e.invokeTask [as invoke] (polyfills.js:3)
    at p (polyfills.js:2)
    at d (polyfills.js:2)

Expected behavior:
It shouldn't throw the error.

Steps to reproduce:
Just do a right click and you'll get the error.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.8.0

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.0.0 
    Node       : v8.1.3
    npm        : 5.4.2 
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

[KillerCodeMonkey]

incorrect ionic version. it should be ionic 3.x and not 4.x

[HamzaLJ]

@KillerCodeMonkey corrected. By the way, is there ionic 4.x ? I have the latest version..

[KillerCodeMonkey]

ionic 4 is the next thing. not available, yet ;).

But maybe this is a hint, it will be released in the near future

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having?

RE: 4.x, that is pretty much an internal thing at this point, but yes, it does indicate that it is being actively worked on. AAMOF, it is the primary focus of the whole team at this point.

Thanks for using Ionic!

[Capsup]

@kensodemann HamzaLJ never got back to you, but I actually have the exact same issue with a project of mine. You can find a completely cut-down version of my project here. I've removed _all_ of the typescript code except for the bare minimum initializations required to run into the error, in my own case.

I'm not sure if the error is in ionic (honestly, I don't think so) but I'd personally appreciate it very much if somebody more experienced with this had a good idea of how to solve the issue properly.

After digging deep into it, I ended up looking at the es6.promise.js file module in core-js as that was part of the code that was transpiled into the polyfills.js file. Digging into it with the chrome debugger, I noticed that the .Resolve function of the Promise that Object.SetNativePromise was setting, (as the exception text correctly states) has .Resolve set to null. So I assume something goes wrong somewhere when doing polyfilling for Promise.

The way I ended up solving it temporarily for myself, was to comment out line 26 - 36 in es6.promise.js, the following lines:

var USE_NATIVE = !!function () {
  try {
    // correct subclassing with @@species support
    var promise = $Promise.resolve(1);
    var FakePromise = (promise.constructor = {})[require('./_wks')('species')] = function (exec) {
      exec(empty, empty);
    };
    // unhandled rejections tracking support, NodeJS Promise without it fails @@species test
    return (isNode || typeof PromiseRejectionEvent == 'function') && promise.then(empty) instanceof FakePromise;
  } catch (e) { /* empty */ }
}();

which is the function that attempts to check if the Promise object has already been polyfilled by another library and instead, just replaced it with var USE_NATIVE = true;.

This is in no way a viable solution, but I just needed to get it work so I could get on with the test project.

The problem I run into now is the fact that I can't get this to run on ionic's build servers, because obviously I run into the same error there, since the Ionic build system uses the default implementations of the npm modules, as it should, so I'm once again stuck with this error.

Any good ideas as to how to solve it in a proper fashion?

[tianxang]

Hi !
Same error when trying to use hanzi-writer in ionic project 3. Work on angular but got same error on ionic :
console polyfills.js:3 Uncaught TypeError: t.resolve is not a function
at Object.setNativePromise (polyfills.js:3)
at L.configurable.L.set (polyfills.js:3)
at module.exports.module.exports (hanzi-writer-lib.js:289)
at $export (hanzi-writer-lib.js:97)
at Object. (hanzi-writer-lib.js:14088)
at __webpack_require__ (hanzi-writer-lib.js:21)
at Object. (hanzi-writer-lib.js:11479)
at __webpack_require__ (hanzi-writer-lib.js:21)
at Object. (hanzi-writer-lib.js:11340)
at Object. (hanzi-writer-lib.js:11366)

and in ionic page 👍 TypeError: t.resolve is not a function
at Object.setNativePromise (http://localhost:8100/build/polyfills.js:3:18280)
at L.configurable.L.set (http://localhost:8100/build/polyfills.js:3:23002)
at module.exports.module.exports (http://localhost:8100/build/vendor.js:119482:12)
at $export (http://localhost:8100/build/vendor.js:119290:17)
at Object. (http://localhost:8100/build/vendor.js:133281:1)
at __webpack_require__ (http://localhost:8100/build/vendor.js:119214:30)
at Object. (http://localhost:8100/build/vendor.js:130672:1)
at __webpack_require__ (http://localhost:8100/build/vendor.js:119214:30)
at Object. (http://localhost:8100/build/vendor.js:130533:1)
at Object. (http://localhost:8100/build/vendor.js:130559:30)

I am a noob so unable to figure out whats going on.
Is this a bug in Ionic ? Why can I use this 3rd party library ion angular and not in Ionic ?
Thanks for help.

[pvdyck]

Same problem here ... any news ?

[kensodemann]

@Capsup - using your repo, I commented out the CiscoSpark.init code in home.ts and then the error went away. I just did that because it looked like it was the first substantial code that would be run, so dumb luck.

Anyhow, the es6.promise.js stuff is part of core-js, which seems to be being installed with the ciscopark stuff:

~/Projects/Issues/IonicTestProject (master *): npm ls core-js
[email protected] /Users/kensodemann/Projects/Issues/IonicTestProject
└─┬ [email protected]
  ├─┬ [email protected]
  │ └── [email protected] 
  └─┬ [email protected]
    └── [email protected]  deduped

I'm not sure if that helps at all.

[Capsup]

@kensodemann, unfortunately not, as I had already cut the project down to the very minimum required to encounter the error and just initialising the CiscoSpark SDK does that, since that's obviously the code that calls down into core-js.

Something I haven't tried, which I will do monday, is to just add the CiscoSpark SDK to a non-Ionic project and see if I encounter the same error there. If not, I imagine this has something to do with the combination of Ionic and core-js attempting to polyfill Promises. If the same error still happens, it obviously has to do with core-js.

I just wonder why it isn't possible to find the error message anywhere else using Google but now there's suddenly 4 of us, within the span of a week, encountering the same error across multiple modules?

[smxdevst]

+ same error

[gabrielfreire]

I'm trying to import keras-js into Ionic 4 and getting the same error, anyone?

[tianxang]

No, I came back to pure javascript/html/css project to make it work. I love Ionic but can't go through this issue.

[gabrielfreire]

so sad, ok thanks @tianxang

[shriharip]

I am having the same problem. The problem started when I added the mongodb-stitch into the standard super starter pack. I just import " import { StitchClientFactory } from 'mongodb-stitch';
in a provider.ts and nothing in app module or appcomponent.ts.

[tianxang]

Hi !
For me, I finally solved the problem.
I got this error when importing third party library (Hanzi Writer) and initialize new writer object. The problem was the object need a dom reference but the page script load BEFORE the html.
Put the initialization into ionViewDidLoad( ) { } solved the problem.
Hope that help.

[gabrielfreire]

Hi
For me, the problem was the typescript version, i was using an older version than the library (Keras-js).
Once i updated my typescript version on package.json, the error disappeared
hope that helps.

[phingers]

I'm getting this error with the MongoDB Stitch service and trying to import their sample code into my Ionic Application.

import { StitchClientFactory } from 'mongodb-stitch';
let appId = 'myappid-from-mongodb';
    const clientPromise = StitchClientFactory.create(appId);
    clientPromise.then(client => {
      const db = client.service('mongodb', 'mongodb-atlas').db('myDBname');
      client.login().then(() =>
        db.collection('Messages').updateOne({owner_id: client.authedId()}, {$set:{number:42}}, {upsert:true})
      ).then(() =>
        db.collection('Messages').find({owner_id: client.authedId()}).limit(100).execute()
      ).then(docs => {
        console.log("Found docs", docs)
        console.log("[MongoDB Stitch] Connected to Stitch")
      }).catch(err => {
        console.error(err)
      });
    });
  }

Error is:

polyfills.js:3 Uncaught TypeError: t.resolve is not a function
at Object.setNativePromise (polyfills.js:3)
at L.configurable.L.set (polyfills.js:3)
at module.exports (bson.js:298)
at $export (bson.js:106)
at Object. (bson.js:11113)
at __webpack_require__ (bson.js:30)
at Object. (bson.js:8511)
at __webpack_require__ (bson.js:30)
at Object. (bson.js:8372)
at Object. (bson.js:8398)

[phingers]

@shriharip - did you have any luck on sorting it out?

[shriharip]

@phingers no I was not able to resolve and I moved back to firebase

[phingers]

I have it working in IONIC without the factory by importing

<script src="https://s3.amazonaws.com/stitch-sdks/js/library/stable/stitch.min.js"></script>

into index.html

Then in my TS files, I can do something similar too.

let client = new stitch.StitchClient(appId);

        let db = client.service("mongodb", "mongodb-atlas").db("DBNAMEHERE");
    client.login().then(() =>
        db.collection('Messages').updateOne({owner_id: client.authedId()}, {$set:{number:42}}, {upsert:true})
      ).then(() =>
        db.collection('Messages').find({owner_id: client.authedId()})
      ).then(docs => {
        console.log("Found docs", docs)
        console.log("[MongoDB Stitch] Connected to Stitch")
      }).catch(err => {
        console.error(err)
      });

Hope it helps someone else until it is patched properly.

[shriharip]

@phingers thanks.
But stitch will be undefined right? We need to import . How to do that.?

[rovashan]

@kensodemann Any update on a reliable fix for this issue?

We tried the workaround provided by @Capsup but now our code no longer builds on Ionic Deploy.

[goldman94]

Also having this problem. It happens when I install npm package 'bson'. First, I was trying to import the 'mongodb' package but got a weird error Cannot find module "module" coming from the import statement. Then, I tried explicitly installing its dependencies, and once I installed 'bson' and ran ionic serve I got this t.resolve() error. It is worth noting this error goes away if I comment out my import of 'mongodb'.

All the suggested workarounds seem specific to some other package I'm not using. Can anyone help with my case?

[kensodemann]

@rovashan - The workaround you refer to will not work on Ionic Pro because it will not have the hacked version of the polyfill.

Have you tried the workaround mentioned here: https://github.com/ionic-team/ionic/issues/13459#issuecomment-374850999

[kleeb]

same for me trying to add mongodb-stitch, @phingers workaround didn't work for me
I think that npm uses the same sources as the js from aws

[kleeb]

had the same problem with mongodb-stitch
played a lot with various settings and workarounds (different versions of angular, typescript, zone.js, custom fixes in zone.js lib)

the result is that I think there is currently no way to use it via npm, the only way was to add the stitch.min.js script BEFORE polyfill.js in html, and after

        const clientPromise = stitch.StitchClientFactory.create(this.appId);
        this.stitchClient = await clientPromise;

with declare var stitch; at the top

[phingers]

I agree, that is the way I'm doing it and it is working fine.

Their s3 bucket is broken with stitch right now, I have a support ticket
open with them on that and they hope to fix that soon. Otherwise, the rest
is working great.

-Bryan

On Thu, May 10, 2018 at 6:36 AM, Andrzej Przedecki <[email protected]

wrote:

had the same problem with mongodb-stitch
played a lot with various settings and workarounds (different versions of
angular, typescript, zone.js, custom fixes in zone.js lib)

the result is that I think there is currently no way to use it via npm,
the only way was to add the stitch.min.js script BEFORE polyfill.js in
html, and after

const clientPromise = stitch.StitchClientFactory.create(this.appId);
this.stitchClient = await clientPromise;

with declare var stitch; at the top

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://mailtrack.io/trace/link/08789f2b3e31a76518bfd7316d9c42063eccd79a?url=https%3A%2F%2Fgithub.com%2Fionic-team%2Fionic%2Fissues%2F13459%23issuecomment-388017677&userId=75660&signature=7e8accf9a1aa781c,
or mute the thread
https://mailtrack.io/trace/link/3bb20ec2583bb445f449db590bbaaf9efbfa956d?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FADMGaoBOWK8dFimuz2QkhSFkiL2yErJFks5txBg7gaJpZM4Qjf6e&userId=75660&signature=009bdf092ed8a2b9
.

[iwasingh]

Same problem here with ciscospark Browser SDK
anyone has solved the problem?

A solution could be to inject the bundle directly in index.html of the ionic project. The bundle is generated through browserify.

[jordiadan]

@iwasingh Did you find the solution? I've the same problem.

[iwasingh]

@jordiadan I had a problem with ciscospark browser SDK in a Ionic app.
I was able to solve thanks to this

Basically, the idea is to build a bundle, as explained in the link above, and inject it in the index.html of the Ionic app.

```

```
Actually, i deprecated the idea because you can't use fully the sdk in the mobile version. If you want, i advice you to make your mini-sdk using directly the api provided by https://developer.webex.com/quick-reference.html

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/323