Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to migrate script tag to a modern vite app

I created my resume on https://dev.sambarnades.com using a Bootstrap model.

Now, i would want to re-adapt that website and power it on Netlify with Sanity as headless CMS in order to easily & visually modify it through Netlify.

I created a react-vite app thanks to :

npm create vite@latest

Then, I copied & past the content, adapting it to .jsx format.

But it seems the former script tags aren’t read by this new vite app format.

index.html (where is pointing the React app.jsx)

 <body class="index-page">
    <main id="root"></main>

    <!-- Vendor JS Files -->
    <script src="src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 
    <script src="src/assets/vendor/aos/aos.js"></script>
    <script src="src/assets/vendor/typed.js/typed.umd.js"></script>
    <script src="src/assets/vendor/purecounter/purecounter_vanilla.js"></script>
    <script src="src/assets/vendor/waypoints/noframework.waypoints.js"></script>
    <script src="src/assets/vendor/glightbox/js/glightbox.min.js"></script>
    <script src="src/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="src/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="src/assets/vendor/swiper/swiper-bundle.min.js"></script>

    <!-- Main JS File -->
    <script src="src/assets/js/template.js"></script>

    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

app.jsx (where I copied my content.)

function App() {

  return (
    <>
      <header id='header' className='header d-flex flex-column justify-content-center'>

        <i className='header-toggle d-xl-none bi bi-list'></i>

... all the code ...

 </div>
      </div>
    </footer>
  <a href="#" id="scroll-top" className="scroll-top d-flex align-items-center justify-content-center"><i className="bi bi-arrow-up-short"></i></a>
    </>
  )
}

export default App

I should see the exact same content as on https://dev.sambarnades.com but instead of it, I only see this picture & blank content. It seems that all the content which is driven by the <script> tags is not interpreted.

enter image description here

I will be very glad to have ideas & advice about this issue. Thanks!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution.

    I encapsulate all the scripts url into constants in my app.jsx & refer them into an array.

    function App() {

  const bootstrap = "src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js";
  const aos = "src/assets/vendor/aos/aos.js";
  const typed = "src/assets/vendor/typed.js/typed.umd.js";
  const purecounter = "src/assets/vendor/purecounter/purecounter_vanilla.js";
  const waypoints = "src/assets/vendor/waypoints/noframework.waypoints.js";
  const glightbox = "src/assets/vendor/glightbox/js/glightbox.min.js";
  const imagesloaded = "src/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js";
  const isotope = "src/assets/vendor/isotope-layout/isotope.pkgd.min.js";
  const swiper = "src/assets/vendor/swiper/swiper-bundle.min.js";
  const template = "src/assets/js/template.js";

  const externalDependencies = [bootstrap, aos, typed, purecounter, waypoints, glightbox, imagesloaded, isotope, swiper, template];



  return (

    Then I mapped the array to inject the Javascript at the end of the code.

    </footer>{/* Scroll Top */}
      <a href="#" id="scroll-top" className="scroll-top d-flex align-items-center justify-content-center"><i className="bi bi-arrow-up-short"></i></a>

    {
  useEffect(() => {
    externalDependencies.map(dependency => {
      let script = document.createElement('script');
      script.src = dependency;
      document.body.appendChild(script);
      return () => {
        document.body.removeChild(script);
      };
    }, []);
  })}

    </>
  )
}

export default App

  2. 0

    You a are missing a slash in the beginning of the src path;

    //before
<script src="src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

//after
<script src="/src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    And your folder structure has to be something like:

    this means the files must be local

    project/
├── index.html
└── src/
    └── assets/
        └── vendor/
            └── js/
                └── bootstrap.bundle.min.js

    And another way is to load inside the index.js or main.js file

    import "./src/assets/vendor/waypoints/noframework.waypoints.js"

    Also see this related topic

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search