CODEWITHSUNDEEP
javascripthtmlreactjs
Norayr Ghukasyan
Norayr Ghukasyan

Reputation: 1418

How to load external script in react application

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.

I am trying to integrate Yodlee Fastlink into my app. This is the script which I should run.

((window) => {
    document.getElementById('btn-fastlink').addEventListener(
        'click',
        (event) => {
            window.fastlink.open({
                fastLinkURL: 'fastlinkURL',
                accessToken: 'Bearer accessToken',
                params: {
                    configName: 'Aggregation',
                },
            }, 'container-fastlink');
        },
        false,
    );
})(window);

And here is the react component.

import React, { useEffect } from 'react';
import { Button } from 'react-bootstrap';

export const LinkBankDetails = React.memo((props) => {
    useEffect(() => {
        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 (
        <div id="container-fastlink">
           <Button type="submit" id="btn-fastlink">Continue</Button>
        </div>
    );
});

And in the end, I get this error

Uncaught SyntaxError: Unexpected token '<'

I have been struggling almost 2 hours and need your help.

Upvotes: 0

Views: 242

Answers (1)

evelynhathaway
evelynhathaway

Reputation: 1887

The following error is usually because your browser is trying to load HTML or non-compiled JSX as JavaScript.

Uncaught SyntaxError: Unexpected token '<'

If you view or visit the source in your browser development tools and it says the following or otherwise looks like your index.html, you know that your local server is falling back to your single page application.

You need to enable JavaScript to run this app.

Look at the documentation for your project to see how to serve static files. If you are using Create React App, this guide on using the public folder should help.

Upvotes: 1

Related Questions