I am trying to use a variable from a library I have loaded in a script tag in my index.html for my React ponents. I've loaded it as normal:
<head>
...
<script src=".js"></script>
<!-- gives me the 'Plaid' library -->
...
<title>React App</title>
</head>
However, when I try accessing Plaid in my React ponents, it's undefined. I am confused because if I put in a debugger right before it, I can still access it. For instance, in my App.js ponent, I have:
ponentDidMount() {
debugger // can access 'Plaid' here
Plaid // throws error, 'Plaid' is undefined
}
Why is it that Plaid throws an error, even though I can access it through the debugger?
I am trying to use a variable from a library I have loaded in a script tag in my index.html for my React ponents. I've loaded it as normal:
<head>
...
<script src="https://cdn.plaid./link/v2/stable/link-initialize.js"></script>
<!-- gives me the 'Plaid' library -->
...
<title>React App</title>
</head>
However, when I try accessing Plaid in my React ponents, it's undefined. I am confused because if I put in a debugger right before it, I can still access it. For instance, in my App.js ponent, I have:
ponentDidMount() {
debugger // can access 'Plaid' here
Plaid // throws error, 'Plaid' is undefined
}
Why is it that Plaid throws an error, even though I can access it through the debugger?
- Are you using Webpack? – Andrew Li Commented Jun 3, 2017 at 2:22
-
I'm using create-react-app, and then testing my code via
npm start, which I think goes through Webpack before piling? It's installed as a node module by default. – paoliff Commented Jun 3, 2017 at 2:41
2 Answers
Reset to default 4I know this is late but I am answering this here for future users who had trouble doing what was described above.
The excepted answer is not the best way of going about integrating Plaid (or any external dependency in a <script> tag). Ejecting a React app should be avoided when possible.
A better solution is to use the React built in way of accessing the global variable the script loads. You do this by accessing the window object (window.NameOfYourObject). In this case it would be window.Plaid.
In the context of the above example this 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 the head works but it is also poor practice. It would be better to load the script with the ponent using something like react-load-script.
The problem is that Webpack files are bundled separately, separate from the required script. Thus, when you try to access the global variable, it doesn't exist.
You're going to have to customize your Webpack configuration yourself if you want to use <script>s. This involves ejecting create-react-app and managing everything yourself. Backup your project before you do this, because after ejecting there's no going back! First run:
npm run eject
After ejecting finishes, navigate to the webpack.config.js and add a new key to the configuration object:
externals: {
}
What externals does is take a global variable declared by a script from a CDN such as Plaid, and allows it to be used as a module in the project. Thus, configure it like this:
externals: {
plaid: 'Plaid'
}
This takes the global variable Plaid from the CDN and serves it as a module named plaid. Then you'll be able to use Plaid after importing it:
const Plaid = require('plaid'); //ES5
import Plaid from 'plaid'; //ES2015
(None of this is tested, proceed at your own risk). I would much prefer to use an NPM package if it is provided, over a CDN.