Why does does my JS external files not loading into my react page?

Question

I am dynamically appending scripts to my react app like this

    export const appendScript = (scriptToAppend : string) => {
    const script = document.createElement("script");
    script.src = scriptToAppend;
    script.async = true;
    script.type = "text/jsx"; 
    document.body.appendChild(script);
}

App Component

class App extends React.Component {

  componentDidMount() {   
     appendScript("./assets/custom.min.js");
  } 
}

custom.min.js file

$(document).ready(function(){
    alert("ready");
})

You are mixing up multiple things. if you're having Single Page Application then open up the `index.html` and add the `script` after the `body` tag OR `defer` the execution of this `javascript`. `React` is for creating reusable components, understand the purpose. — Parag Diwan, Feb 26 '22 at 13:51

score 1 · Answer 1 · answered Mar 08 '22 at 12:20

1

Check the answer in https://stackoverflow.com/a/34425083/13558764.

Or you can try "react-helmet" package.

Here is a sample usage.

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <script src="https://use.typekit.net/foobar.js"></script>
                <script>try{Typekit.load({ async: true });}catch(e){}</script>
            </Helmet>
            
        </div>
    );
  }
};

answered Mar 08 '22 at 12:20

Hik Hik

41
5

I think react-helmet make it easy for beginners, also makes it easy to add multiple js files. – Hik Hik Mar 08 '22 at 12:22
Loading JavaScript Files The problem with this approach is that it's hard to control when a particular script got loaded. Errors during loading are hard to process as well. For dynamically loading JavaScript files we may use the [Code Splitting](https://reactjs.org/docs/code-splitting.html) and [React.lazy](https://reactjs.org/docs/code-splitting.html#reactlazy). For server-side rendering, we may use [Loadable Components](https://loadable-components.com/). Refer to this [Article](https://www.newline.co/@dmitryrogozhny/when-to-use-and-when-to-avoid-using-react-helmet--bf6f62d5) – Hik Hik Mar 08 '22 at 12:37

Joseph Davidson · Answer 2 · 2022-07-05T14:25:20.800

0

import React, {useEffect} from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./Components/Home/HomePage";

function App(){

useEffect(() => {
const script = document.createElement("script");
script.src = "/js/main.js"; //your path to your file inside your public folder
script.async = true;
document.body.appendChild(script);
return () => {
  document.body.removeChild(script);
};

}, []);` return( {/* this should work */} <Route path="/" element={} /> ) }

edited Jul 05 '22 at 14:25

answered Jul 05 '22 at 14:23

Joseph Davidson

11
2

just do this in your app.js file and it going to work like a magic – Joseph Davidson Jul 05 '22 at 14:29
Welcome to StackOverflow! Please fix your formatting and explain your code. – ethry Jul 06 '22 at 06:36
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – ethry Jul 06 '22 at 06:36

Why does does my JS external files not loading into my react page?

2 Answers2