Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to bundle a JS script with Vite + React

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.net/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.

like image 667
Hector Toro Avatar asked Oct 23 '25 00:10

Hector Toro


1 Answers

You can just import it in your main.jsx file.

import "./vendors/faceio/fio.js"

const faceio = new faceIO("fioa414d");
like image 134
jonybekov Avatar answered Oct 24 '25 13:10

jonybekov



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!