React public folder scripts

Question

Calling on the react experts haha. I am trying to import/include some external javascript files into my React project, these js files cannot be changed or edit as per instructions from my company, as this is a base for many application that uses them.

For reasons i wont be putting the real filenames and folders. There is a folder in my public folder called "testModules", so path is public/testModules/ all the files / 3 files that i need to include is in there.

What i have tried so far.

In my index.html file at the bottom i have tried the following

<script type="text/JavaScript" src="%PUBLIC_URL%/testModules/test1.js"></script>
<script type="text/JavaScript" src="%PUBLIC_URL%/testModules/test2.js"></script>
<script type="text/JavaScript" src="%PUBLIC_URL%/testModules/test3.js"></script>

and

<script type="text/JavaScript" src="./testModules/test1.js"></script>
<script type="text/JavaScript" src="./testModules/test2.js"></script>
<script type="text/JavaScript" src="./testModules/test3.js"></script>

and

<script type="application/javascript" src="./testModules/test1.js"></script>
<script type="application/javascript" src="./testModules/test2.js"></script>
<script type="application/javascript" src="./testModules/test3.js"></script>

and

Then i have also tried using the ScriptTag plugin "react-script-tag"

with the same examples as above, but instead of %PUBLIC_URL% i used process.env.PUBLIC_URL

When i try any of the above it works on my local development env. For example running npm run start and opening on localhost

But as soon as i move to application to a live server i get the following err

Refused to execute script from 'https://test.com/testModules/test.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

For all the files i added.

Now i open up my dev console and i can see the scripts are appended/included in the body at the bottom.

What is going on and how can i fix it.

Thanks You

Answer 1

If you wouldn't like to make any improvements to your deployment architecture, then you should pretty much talk to "your backend devs" so that they configure the web server so that this particular route would emit a different MIME type while serving this particular static file.

Alternatively, if possible, you could use Webpack to statically link the third-party code base to your React project so that they are distributed together. This way, if you use any implementation of Javascript modules, you will eliminate this crutch of your library being visible at the scope of the HTML host and this might bring improvement to your codebase.