Using included script in index.html in React components
I am trying to use a variable from a library that I loaded into a script tag in mine index.html
for my React components. I downloaded it as usual:
<head>
...
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<!-- gives me the 'Plaid' library -->
...
<title>React App</title>
</head>
However, when I try to access Plaid
in my React components, it is undefined. I'm confused because if I put a debugger right in front of it, I can still access it. For example, in my component App.js
I have:
componentDidMount() {
debugger // can access 'Plaid' here
Plaid // throws error, 'Plaid' is undefined
}
Why is there an error Plaid
even though I can access it through the debugger?
source to share
The problem is that the Webpack files are shipped separately, separate from the required script. So when you try to access a global variable, it doesn't exist.
You will have to tweak the Webpack config yourself if you want to use <script>
s. This includes throwing out create-react-app
and managing everything. Back up your project before you do it because there is no return after checkout! First start:
npm run eject
Once you've selected completion, go to webpack.config.js
and add a new key to the config object:
externals: {
}
Which externals
does takes a global variable declared by a script from a CDN like Plaid and allows it to be used as a module in the project. Thus, configure it like this:
externals: {
plaid: 'Plaid'
}
This takes a global variable Plaid
from the CDN and serves it as a named module Plaid
. Then you should be able to use Plaid after import:
const Plaid = require('plaid'); //ES5
import Plaid from 'plaid'; //ES2015
(None of this is verified, act at your own risk). I'd rather use the NPM package, if provided, via the CDN.
source to share
I know this is late, but I am answering this here for future users who have had issues with what was described above.
The excluded answer is not the best way to integrate Plaid (or any external dependency in the tag <script>
). Fetching a React app should be avoided whenever possible.
The best solution is to use the React built in way of accessing the global script load variable. You do this by accessing the window object ( window.NameOfYourObject
). In this case it will be window.Plaid
.
In the context of the above example, it would look like
this.linkHandler = window.Plaid.create({
clientName: 'plaid walkthrough demo',
product: ['transactions'],
key: 'YOUR KEY',
env: 'sandbox',
webhook: this.props.webhook,
token: this.props.token,
selectAccount: this.props.selectAccount,
longtail: this.props.longtail,
onLoad: this.handleLoad,
onSuccess: this.handleSuccess,
onExit: this.handleExit,
});
Having the script in your head works, but it's also bad practice. It would be better to load the script with a component using something like react-load-script .
source to share