PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Monday, November 14, 2022

[FIXED] How come my external JS file won't load in ReactJS?

 November 14, 2022     external, javascript, reactjs     No comments   

Issue

I can't for the life of me figure out why this external JS file isn't loading. I've tried every help question out there and it still won't work so maybe someone else can see what I can't.

So I'm working on a ReactJS project and I'm trying to link an external JS file.

Here is the file structure: enter image description here

The external javascript file is in public/js/script.js.

I've tried every method I've found to get it to work.

I've linked it in index.html as follows:

<script src="./js/script.js" type="text/jsx"></script>

I've added the following to my main App component:

    componentDidMount() {
        const script = document.createElement('script');
        let url = '../public/js/script.js'
        script.src = url;   //(This is external js url)
        script.async = true;
        document.body.appendChild(script);
      }

I've added this into the functional component where I really need the external javascript to work:

      useEffect(() => {
        const script = document.createElement('script');
        script.src = '../public/js/script.js';   //(This is external js url)
        script.async = true;
        document.body.appendChild(script);
      }, [])

And yet not matter any of these attempts nothing seems to make the file work.

I am running the project on localhost, so I'm not sure if there's an issue there. I'd just like to figure out how to make external javascript files work. I've tried using Helmet.

I don't know what I'm doing wrong. Anyways, appreciate any help I can get trying to figure this out.

Edit: I did adjust the following: src="./js/script.js to src="js/script.js in the <script> tag and it also has had no effect. Still looking for a solution.


Solution

This solution worked for me

  1. I used useEffect hook inside a function component (before return). This can be used inside App.js also before return. Note: if you want to do this inside a class which extends React.component then you need to use componentDidMount() (before render), this is required as hooks work inside a function component or custom hooks only.
  2. In the header add a script tag
  1. Small Snippet of the code :

    import React, from "react";
    
    React.useEffect(() => {
    
    
      const LoadExternalScript = () => {
          const externalScript = document.createElement("script");
          externalScript.onerror = loadError;
          externalScript.id = "external";
          externalScript.async = true;
          externalScript.type = "text/javascript";
          externalScript.setAttribute("crossorigin", "anonymous");
          document.body.appendChild(externalScript);
          externalScript.src = './script.js';
    };
    LoadExternalScript();
    
    
      return () => {
    
        // document.body.removeChild(externalScript);
      };
    }, []);
    
  2. You will find this link useful if you get a syntax error:

"Uncaught SyntaxError: Unexpected token < in React" Syntax error solution



Answered By - Amardeep Singh Sidhu
Answer Checked By - Marilyn (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing