title: How to load external script in react application
body: <p>I am here with a well-known problem related to external script loading inside react application. Despite many articles on the web and a lot of similar questions asked in StackOverflow, I can't solve my problem.</p>
  <p>I am trying to integrate Yodlee Fastlink into my app. This is the script which I should run.</p>
  <pre><code>((window) =&gt; {
      document.getElementById('btn-fastlink').addEventListener(
          'click',
          (event) =&gt; {
              window.fastlink.open({
                  fastLinkURL: 'fastlinkURL',
                  accessToken: 'Bearer accessToken',
                  params: {
                      configName: 'Aggregation',
                  },
              }, 'container-fastlink');
          },
          false,
      );
  })(window);
  </code></pre>
  <p>And here is the react component.</p>
  <pre><code>import React, { useEffect } from 'react';
  import { Button } from 'react-bootstrap';
  
  export const LinkBankDetails = React.memo((props) =&gt; {
      useEffect(() =&gt; {
          const script = document.createElement('script');
          script.src = '/public/external-services/fastlink-integration.js';
          script.defer = true;
          script.type = 'text/javascript';
          document.body.appendChild(script);
  
      }, []);
  
      return (
          &lt;div id=&quot;container-fastlink&quot;&gt;
             &lt;Button type=&quot;submit&quot; id=&quot;btn-fastlink&quot;&gt;Continue&lt;/Button&gt;
          &lt;/div&gt;
      );
  });
  </code></pre>
  <p>And in the end, I get this error</p>
  <blockquote>
  <p>Uncaught SyntaxError: Unexpected token '&lt;'</p>
  </blockquote>
  <p>I have been struggling almost 2 hours and need your help.</p>