How to load external script in react application

Question

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.

What happens when you look at the script in the source panel of your dev tools? Is your local server responding with an HTML document? Also, your original script can easily be converted to a React button handler without adding this script every time <LinkBankDetails> mounts. — evelynhathaway
– evelynhathaway, Commented Jun 3, 2021 at 23:43
@evelynhathaway It just doesn't recognize it's a JS. <You need to enable JavaScript to run this app.> — Norayr Ghukasyan
– Norayr Ghukasyan, Commented Jun 4, 2021 at 22:37
If it says You need to enable JavaScript to run this app., then you are serving your HTML file, and not your script as you expect. Look at the documentation on how to serve static files. If that doesn't help, tell us your configuration details (Webpack, if you're using Create React App, etc.) and then we may have a shot at helping you — evelynhathaway
– evelynhathaway, Commented Jun 4, 2021 at 23:06
You saved my time ... thanks a lot. Changing src path to ${process.env.PUBLIC_URL}/external-services/fastlink-integration.js solved the problem.You can write a response in order to make it accepted. — Norayr Ghukasyan
– Norayr Ghukasyan, Commented Jun 4, 2021 at 23:12
Yay! I am glad that fixed it for you! I added an answer so others finding it will see it's answered. — evelynhathaway
– evelynhathaway, Commented Jun 5, 2021 at 0:14

evelynhathaway · Accepted Answer · 2021-06-05 00:13:39Z

1

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.

answered Jun 5, 2021 at 0:13

evelynhathaway

1,91716 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to load external script in react application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related