Skip to content

How to make external javascript file work in ReactJs?

In a React project, my public.html file looks like this:

    <link rel="stylesheet" href="some_stylesheet_file.css">
    <div id="root"></div>

    <script src="function.js"></script>

All the components of the project load inside the “root” div. The “function.js” file is an external javascript file from a theme.

In one of the React components, I have an input field:

<input type="text" name="userName" id="userName" />

Now, inside “componentDidMount()” of that component, if I write


it shows the “userName” field correctly in the console. But if I do the same thing in the “function.js” file, the output is null, which indicates the external javascript file is not working properly. I am not sure how to make the external javascript file work so that I can use the properties of the theme. Can anyone help?


We use the DOM method to load external JS in our ReactJS app.

For example, is an external JS library provided by mesibo, we load it as following

const externalJS = "";
const script = document.createElement("script");
script.src = externalJS;