admin管理员组

文章数量:1389807

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.

  • javascript
  • reactjs
  • bundle
  • vite
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 badges
Add a ment  | 

2 Answers 2

Reset to default 3

You 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.

本文标签： javascriptHow to bundle a JS script with ViteReactStack Overflow

版权声明：本文标题：javascript - How to bundle a JS script with Vite + React - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744596090a2614786.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。