Error: Uncaught (in promise): ReferenceError: Plaid is not defined

Ionic Framework ionic-v3
1

Hi everyone- I am trying to implement the Plaid API (https://plaid.com/docs/api/) into Ionic 3.

The way you integrate Plaid is by injecting the Plaid client side activation library url into the index.html, declare Plaid as a variable within the .ts file and then using said variable to create functions to do things with the API.

I am following the sample provided here: https://github.com/pbernasconi/plaid-link-ionic-2-example

I keep running into the error mentioned in the title.

Here is the full error trace.

Error: Uncaught (in promise): ReferenceError: Plaid is not defined
ReferenceError: Plaid is not defined
    at new HomePage (http://localhost:8100/build/main.js:168:28)
    at createClass (http://localhost:8100/build/vendor.js:12813:20)
    at createDirectiveInstance (http://localhost:8100/build/vendor.js:12658:37)
    at createViewNodes (http://localhost:8100/build/vendor.js:14116:53)
    at createRootView (http://localhost:8100/build/vendor.js:14005:5)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15430:42)
    at Object.debugCreateRootView [as createRootView] (http://localhost:8100/build/vendor.js:14713:12)
    at ComponentFactory_.create (http://localhost:8100/build/vendor.js:11610:46)
    at ComponentFactoryBoundToModule.create (http://localhost:8100/build/vendor.js:4397:29)
    at Tab.NavControllerBase._viewInit (http://localhost:8100/build/vendor.js:51855:44)
    at http://localhost:8100/build/vendor.js:51668:23
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://localhost:8100/build/vendor.js:5123:33)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
    at r.run (http://localhost:8100/build/polyfills.js:3:10143)
    at http://localhost:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5114:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at o (http://localhost:8100/build/polyfills.js:3:7894)
    at c (http://localhost:8100/build/polyfills.js:3:19752)
    at c (http://localhost:8100/build/polyfills.js:3:19461)
    at http://localhost:8100/build/polyfills.js:3:20233
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5114:33)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)
    at o (http://localhost:8100/build/polyfills.js:3:7894)

Here is part of my src/index.html file that in enclosed within the body tag.

<body>

	<!-- Ionic's root component and where the app will load -->
	<ion-app></ion-app>

	 <!-- PLAID LINK script -->
	<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>

	 <!-- The polyfills js is generated during the build process -->
	 <script src="build/polyfills.js"></script>

	<!-- The vendor js is generated during the build process
  		 It contains all of the dependencies in node_modules -->
	<script src="build/vendor.js"></script>

	<!-- The main bundle js is generated during the build process -->
	<script src="build/main.js"></script>

</body>

And finally, here is my home.ts file where I am using the Plaid API itself:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var Plaid: any;

@Component({
	selector: 'page-home',
	templateUrl: 'home.html'
})

export class HomePage {
linkHandler;

constructor(public navCtrl: NavController) {
		this.linkHandler = Plaid.create({
 			 clientName: 'Plaid Walkthrough Demo',
 			 env: 'sandbox',
 			 key: ‘KEY GOES HERE’,
  			 product: ['auth', 'transactions'],
  			 webhook: '',
  			 selectAccount: false,
  			 forceIframe: true,
 			 onLoad: function() {
    				console.log('loaded');
 			 },
  			onSuccess: function(public_token, metadata) {
   				console.log(public_token);
   				console.log(metadata.account.id, metadata.account.name);
 			 },
  			onExit: function(err, metadata) {
    				if (err != null) {
     				 console.log(err);
   				 }
    				console.log(metadata);
    				console.log(metadata.institution.name, 									metadata.institution.institution_id);
    				console.log(metadata.request_id)
  				}
		 });
 }

 forceExitLink() {
		this.linkHandler.exit();
 }

openLink() {
		this.linkHandler.open();
}

}

Information on Ionic Framework I am using:

Ionic App Framework: 3.9.2
Ionic App Scripts: 3.18
Angular Core: 5.2.9
Angular Compiler CLI: 5.2.9
Node: 6.10.2

What is wrong in my code?

2

I have the same problem :confused:

3

I eventually figured it out- it could be any of the following issues:

  1. Plaid Link Handler not being initialized correctly in the .ts files.
    This issue can be solved by declaring Plaid properly

    declare var Plaid

    before the @IonicPage decorator

  2. Making sure you initialize the LinkHandler properly. Make sure you initialize it with all the correct parameters. This could be a potential issue.

  3. Could be an issue with config.xml

  4. Lastly, make sure your browser or none of its extensions are blocking anything.