react-plaid-link: Loading Plaid fails on initial page load

I get Error loading Plaid null when using usePlaidLink every time I initially load my app in the browser. When I navigate away from the place where I use Plaid and navigate back, everything works.

The reason seems to be this check: https://github.com/plaid/react-plaid-link/blob/62b457dd0ebce99de930c8a5dca838489c5e683a/src/usePlaidLink.ts#L36

From what I can tell, loading becomes false, but window.Plaid is not yet available (perhaps react-script-hook sets loading to false as soon as the script is downloaded but not when it’s parsed/executed?). Checking window.Plaid in browser’s console indicates that the library is loaded properly soon after the error.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 11
Comments: 32 (3 by maintainers)

Most upvoted comments

I’m still getting Error loading Plaid null on v2.2.0 every time I refresh a page with PlaidLink or usePlaidLink. When I use the back button it works fine.

aymanbagabas on Apr 7, 2020

Found a solid workaround to this issue. Just include <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script> in your index.html file and it eliminates this issue of Plaid being null on load

ryanfogarty on Aug 6, 2020

i am also getting Error loading Plaid with the hooks example

joernroeder on Mar 27, 2020

facing the same issue for V3.2.0

shubhammetha on Aug 17, 2021

I see this as well

zallarak on Dec 11, 2020

Lock hasn’t been updated: https://github.com/plaid/react-plaid-link/blob/v2.2.0/yarn.lock#L9143

Ruk33 on Apr 8, 2020

I’m experiencing the same issue. After trying for a while, I was able to reproduce it in a very tricky way, here is an example:

import React, { useCallback, useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { usePlaidLink } from 'react-plaid-link';

const App = () => {
  const onSuccess = useCallback((token, metadata) => {
    // send token to server
  }, []);

  const config = {
    clientName: 'Your app name',
    env: 'sandbox',
    product: ['auth'],
    publicKey: 'KEY',
    onSuccess,
    // ...
  };

  const { open, ready, error } = usePlaidLink(config);

  return (
    <button onClick={() => open()} disabled={!ready}>
      Connect a bank account
    </button>
  );
};

const BuggedComponent = () => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setVisible(false);
    setInterval(() => setVisible(true), 1)
  }, [])

  return (
    <>
      {visible && <App />}
      {!visible && 'Hidden'}
    </>
  )
}

ReactDOM.render(<BuggedComponent />, document.getElementById('app'));

Ruk33 on Apr 2, 2020