title: Including an external js script in a React Component
body: <p>I have a react application, managed using react-scripts.</p>
  
  <p>In my app i am using an external js script.  The external script doesn't do any module exports.  </p>
  
  <p>The structure of the external script is as below (too big to include it in full).</p>
  
  <pre><code>var TradingView = {.... various functions }
  </code></pre>
  
  <p>At the end of the file:</p>
  
  <pre><code>if (window.TradingView &amp;&amp; jQuery) {
      jQuery.extend(window.TradingView, TradingView)
  } else {
      window.TradingView = TradingView
  }
  </code></pre>
  
  <p>My goal is to create a simple react component using the external script, and call the function: <code>TradingView.widget({...});</code></p>
  
  <p>I have been searching online for ways to include an external script in a react component/ES6 style, and have tried various options: react-async-script-loader, and various  webpack plugins: script-loader, imports-loader, ProvidePlugin etc.  But i haven't been able to make it work.</p>
  
  <p>The error i am getting after using the imports-loader or ProvidePlugin is:</p>
  
  <pre><code>1189:31    error    'jQuery' is not defined                        no-undef
  1190:9     error    'jQuery' is not defined                        no-undef
  </code></pre>
  
  <p>In my webpack config, i have:</p>
  
  <p>In the <code>loaders</code> section:</p>
  
  <pre><code>{
      test: /tv\.exec\.js/,
      loader: 'imports?jQuery=jquery,$=jquery,this=&gt;window'
  }
  </code></pre>
  
  <p>In the <code>plugins</code> section:</p>
  
  <pre><code>new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
  })
  </code></pre>
  
  <p>When i create a simple webpage (no react), and include the script, and call <code>TradingView.widget()</code>, the page just works fine.</p>
  
  <p>The closest i could get help was to look at: 
  <a href="https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack">Managing jQuery plugin dependency in webpack</a></p>
  
  <p>But it didn't work for me.  I am quite new to the react, webpack ecosystem, so I am not sure what i am missing here.</p>
  
  <p>Please let me know if you need any additional info.</p>
  
  <p>Update: I tested the above, including the script in a simple react component, but not using the react-scripts this time, and directly using webpack configurations. I was simply able to import the external js in my component directly, and it worked.  I was also able to use imports-loader plugin in webpack to expose jQuery, which also worked.  So its possible that using react-scripts needs something else to make it work.</p>