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
– Parag Diwan, Commented Feb 26, 2022 at 13:51

Hik Hik · Accepted Answer · 2022-03-08 12:20:45Z

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 8, 2022 at 12:20

Hik Hik

515 bronze badges

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

2 Comments

Hik Hik Over a year ago

I think react-helmet make it easy for beginners, also makes it easy to add multiple js files.

Hik Hik Over a year ago

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 and React.lazy. For server-side rendering, we may use Loadable Components. Refer to this Article

Joseph Davidson · Accepted Answer · 2022-07-05 14:25:20Z

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 5, 2022 at 14:25

answered Jul 5, 2022 at 14:23

Joseph Davidson

112 bronze badges

3 Comments

Joseph Davidson Over a year ago

just do this in your app.js file and it going to work like a magic 🤝

ethry Over a year ago

Welcome to StackOverflow! Please fix your formatting and explain your code.

ethry Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related