CODEWITHSUNDEEP
javascripthtmlreactjscreate-react-app
paoliff
paoliff

Reputation: 157

Using included script in index.html in React components

I am trying to use a variable from a library I have loaded in a script tag in my index.html for my React components. I've loaded it as normal:

<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 accessing Plaid in my React components, 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 component, I have:

componentDidMount() {
  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?

Upvotes: 6

Views: 5896

Answers (2)

ecarlin
ecarlin

Reputation: 1233

I 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 component using something like react-load-script.

Upvotes: 4

Andrew Li
Andrew Li

Reputation: 57964

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.

Upvotes: 2

Related Questions