最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Using included script in index.html in React components - Stack Overflow

programmeradmin1浏览0评论

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?

Share Improve this question edited Jun 3, 2017 at 17:34 Andrew Li 58k14 gold badges134 silver badges148 bronze badges asked Jun 3, 2017 at 2:21 paoliffpaoliff 1571 gold badge2 silver badges7 bronze badges 2
  • 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
Add a ment  | 

2 Answers 2

Reset to default 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 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.

发布评论

评论列表(0)

  1. 暂无评论