ERROR Script error. at handleError (http://localhost:3000/static/js/bundle.js 30848:58)

[ppowell777]

I have an HTML page via React project originally generated by create-react-app that contains an external link to another website, but, for some weird reason, it acts like the external link is a part of the React project and throws an error upon clicking the link:

ERROR

Script error:
at handleError (http://localhost:3000/static/js/bundle.js 30848:58)
at http://localhost:3000/static/js/bundle.js 30867:7

Thing is? There is no /static folder anywhere in my React project, much less /static/js/bundle.js file for it to find, yet, magically, it exists somewhere and is triggering an error every time I click onto a link to an external URL. This is messing up the UI/UX for users, and I have no idea how to fix it.

Any ideas? Lost

Thanks

 

[Antero360]

I have an HTML page via React project originally generated by create-react-app that contains an external link to another website, but, for some weird reason, it acts like the external link is a part of the React project and throws an error upon clicking the link:



Thing is? There is no /static folder anywhere in my React project, much less /static/js/bundle.js file for it to find, yet, magically, it exists somewhere and is triggering an error every time I click onto a link to an external URL. This is messing up the UI/UX for users, and I have no idea how to fix it.

Any ideas? Lost

Thanks

Hi there, could you please post the html?

 

[ppowell777]

Here is the React code to produce this:

import {listHeaderObj,
        list1Array,
        list2Array,
        generalInfoListArray} from "../constants/footer_container_constants";
import {generateFooterList} from "../functions/generate_footer_list";
import {ExternalLink} from "../functions/global_functions";

const FooterContainer = () => {
    const ExternalLI = () => {
        return (
          <li>
              <ExternalLink url="https://www.example.com/subscribe" text="Subscribe" />}} />
          </li>
        );
    };

    return (
        <>
            <div className="col-md-2 col-lg-2 col-xs-12 col-sm-6 text-center-xs text-center-sm
                      odd"
                 dangerouslySetInnerHTML={{__html: generateFooterList(listHeaderObj.group1,list1Array)}} />
            <div className="col-md-2 col-lg-2 col-xs-12 col-sm-6 text-center-xs text-center-sm
                      even"
                 dangerouslySetInnerHTML={{__html: generateFooterList(listHeaderObj.group2,list2Array)}} />

             <div className="col-md-2 col-lg-2 col-xs-12 col-sm-6 text-center-xs text-center-sm
                      odd"
                 dangerouslySetInnerHTML={{__html: generateFooterList(listHeaderObj.general_info, generalInfoListArray) +
                         <ExternalLI />}} />

        </>
    );
};

export default FooterContainer;

export const generalInfoListArray = [
    [url: "/info/updates", title: "General Information - Updates", text: "Updates:},
    {url: "/info/contact", title: "General Information - Contact", text: "Contact"},
    {url: "/info/interactive-data-center", title: "General Information - Interactive Data Center", text: "Interactive Data Center"}
];

export const ExternalLink = ({url, text}) => {
    if (typeof url === 'undefined' || url === null || !url.trim().startsWith('http')) {
        return '';
    } else {
        url = DOMPurify.sanitize(url);
    }

  return (
       <a href={url} target="_blank" rel="noopener noreferrer">
           {DOMPurify.sanitize(text)}
       </a>
  );
};

And the resulting HTML SHOULD look like this:

<ul>
                                                                <li><a href="/info/updates" title="General Information - Updates">Updates</a></li>
                                <li><a href="/info/contact" title="General Information - Contact">Contact</a></li>
                            
                                <li>
                                        <a href="https://www.example.com/subscribe">Subscribe</a>
                                    </li>
                                </ul>

 

[ppowell777]

I changed the React function to use anchor tags instead, but then the Script Error reappeared whenever you click onto the link that should go to an external URL; all other links are fine:

import DOMPurify from "dompurify";

export const generateFooterList = (footerListHeader, contentObj) => {
    try {
        if (typeof footerListHeader === 'undefined' || footerListHeader === null) {
            return '';
        }

        if (typeof contentObj === 'undefined' || contentObj === null) {
            return '';
        }

        let html = `${footerListHeader}\n`;
        if (contentObj.length > 0) {
            html += `<ul>\n`;
            contentObj.forEach((element) => {
                element.url = DOMPurify.sanitize(element.url);
                element.text = DOMPurify.sanitize(element.text);
                html += `<li>\n\t<a href="${element.url}"`;
                if (element.url.trim().startsWith("http")) {
                    html += ' target="_blank" rel="noopener noreferrer"';
                }

                if (element.title != null && element.title.length > 0) {
                    element.title = DOMPurify.sanitize(element.title);
                    html += ` title="${element.title}" `;
                }

                html += `>${element.text}</a>\n</li>\n`;
            });

            html += `</ul>\n`;
        }

        return html;
    } catch (e) {
        console.error(`Unable to run generateFooterList: ${e.message}`);
    }
};

It still produces a Script Error.

Even when I hardcoded an anchor link within /public/index.html:

<div id="stuff">
    <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">
    Google
    </a>
</div>

The link would appear in index.html, but when you click onto it, you'll get the very same Script Error in the original tab while Google appears in the new tab.

I have no idea how to fix this