Using included script in index.html in React components

Question

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?

I'm using create-react-app, and then testing my code via npm start, which I think goes through Webpack before compiling? It's installed as a node module by default. — paoliff
– paoliff, Commented Jun 3, 2017 at 2:41

Jon Sampson · Accepted Answer · 2019-04-04 14:47:17Z

4

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.

edited Apr 4, 2019 at 14:47

Jon Sampson

1,5511 gold badge21 silver badges32 bronze badges

answered Nov 21, 2017 at 2:32

ecarlin

1,2339 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ecarlin Over a year ago

@PratikSinghal sorry to hear that. If you provide more detail on what exactly didn't work I'd be happy to help troubleshoot.

Pratik Singhal Over a year ago

No worries, got it to work, I was making a small mistake while using your solution.

Kun Wang Over a year ago

Remember to call this.linkHandler.open(), otherwise, the popup won't show.

Andrew Li · Accepted Answer · 2017-06-03 17:35:57Z

2

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.

edited Jun 3, 2017 at 17:35

answered Jun 3, 2017 at 3:01

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

2 Comments

paoliff Over a year ago

plaid-node is different from the Plaid I'm trying to use. The Plaid I'm trying to use is actually a "plaid-link" module on the client-side that then connects to the server-side plaid client.

Andrew Li Over a year ago

@paoliff Hmm. Maybe try the second option? I've never personally heard about the Plaid library, sorry about that.

Collectives™ on Stack Overflow

Using included script in index.html in React components

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related