I have a React app with Vite on which I'm implementing an external JS script.
I load the script on index.html and it works perfectly on development, but when I bundle it for production the script is not loaded.
At first, I received an error that I needed to include type="module" when loading the script and that fixed the error, but when I go to the part of the application that uses that script, I get the error that is not defined.
The script is in /vendors/faceio/fio.js.
<body>
<!-- <script src=".js"></script> -->
<script type="module" src="/vendors/faceio/fio.js"></script>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
<script>
const global = globalThis;
</script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
Can anyone point out how to make this work please.
I have a React app with Vite on which I'm implementing an external JS script.
I load the script on index.html and it works perfectly on development, but when I bundle it for production the script is not loaded.
At first, I received an error that I needed to include type="module" when loading the script and that fixed the error, but when I go to the part of the application that uses that script, I get the error that is not defined.
The script is in /vendors/faceio/fio.js.
<body>
<!-- <script src="https://cdn.faceio/fio.js"></script> -->
<script type="module" src="/vendors/faceio/fio.js"></script>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
<script>
const global = globalThis;
</script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
Can anyone point out how to make this work please.
Share Improve this question edited Sep 25, 2022 at 23:27 Htet Oo Wai Yan 1333 silver badges12 bronze badges asked Aug 16, 2022 at 16:33 Hector ToroHector Toro 3901 gold badge4 silver badges19 bronze badges2 Answers
Reset to default 3You can just import it in your main.jsx file.
import "./vendors/faceio/fio.js"
const faceio = new faceIO("fioa414d");
Inside your index.html file, the code inside <body></body> tag should look like this.
<script src="https://cdn.faceio/fio.js"></script>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
Now inside your main.jsx file, or wherever you want to initialize faceIO, use a react hook called useEffect().
import { useEffect } from "react";
function App(){
let faceio;
useEffect(() => {
faceio = new faceIO("fioa414d");
}, []);
}
To build your vite application, run npm run build. You can preview the build before deploying using npm run preview mand.
Hope this solves all your issues. Thanks.
To know more about about faceIO, please visit the official documentation page.