I Unable to load External Js Files in app.js React

Question

I'm trying to import bootstrap template in react application. all external js files in src/assets/js folder. and I don't want to put that external JavaScript files in public folder.

already tried with react-helmet and react-script-tag but these are not working.

   `<Helmet>
    <script
      src="./assets/vendor/jquery/jquery.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
      async
    ></script>
    <script src="./assets/vendor/jquery.easing/jquery.easing.min.js"></script>
    <script src="./assets/vendor/php-email-form/validate.js"></script>
    <script src="./assets/vendor/waypoints/jquery.waypoints.min.js"></script>
    <script src="./assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="./assets/vendor/venobox/venobox.min.js"></script>
    <script src="./assets/vendor/owl.carousel/owl.carousel.min.js"></script>
    <script src="./assets/vendor/aos/aos.js"></script>
    <script src="./assets/js/main.js"></script>
  </Helmet>`

these are all should be in index.js or app.js not in index.html

Ajay Gupta · Accepted Answer · 2023-03-14 10:02:07Z

0

If you want to import the script inside the react component, you can use the following options.

With hooks

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;

Without Hooks And Class Component

componentDidMount () {
  const script = document.createElement("script");
  script.src = url;
  script.async = true;
  document.body.appendChild(script);
}

answered Mar 14, 2023 at 10:02

Ajay Gupta

8617 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I Unable to load External Js Files in app.js React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related