How to include local script file on React page?

Question

I'm implementing barba JS on my React website but can't seem to get the file to work on the page. For reference, my folder structure is as follows:

theme
  pages
    Homepage.js
    Contact.js
  utils
    anim.js
    helpers.js
  index.js

On my index.js file, I'm trying to import my anim.js script so that the file is applied to all my pages . However, upon compilation, I'm getting a 'delay' is not defined no-undef error on anim.js , even though delay is defined (because I'm importing gsap ).

Homepage.js ( Contact.js is similar, only difference being the data-barba-namespace )

import React from "react";
import LoadingScreen from "../components/LoadingScreen/LoadingScreen";
import Hero from "../components/Hero/Hero";

class Homepage extends React.Component {
  render(){
    return (
      <>
        <LoadingScreen />
        <div data-barba="container" data-barba-namespace="home">
          <Hero />
        </div>
      </>
    )
  }
}

export default Homepage;

anim.js

import { pageTransition, contentAnimation } from "./helpers";
import barba from '@barba/core';
import gsap from "gsap";

barba.init({
  sync: true,
  transitions: [{
    async leave(data){
      const done = this.async();
      pageTransition();
      await delay(1000);
      done();
    }, async enter(data){
      contentAnimation();
    }, async leave(data){
      contentAnimation();
    }}
  ]
});

helpers.js

export function pageTransition(){
  var timeline = gsap.timeline();
  timeline.to("loadingScreen",{
    duration: 1.2,
    width: "100%",
    left: "0",
    ease: "Expo.easeInOut"
  });
  timeline.to("loadingScreen",{
    duration: 1,
    width: "100%",
    left: "100%",
    ease: "Expo.easeInOut",
    delay: 0.3
  });
  timeline.set(".LoadingScreen", { left: "-100%" } );
}

export function contentAnimation(){
  var timeline = gsap.timeline();
  timeline.from("animate-this", {
    duration: 1,
    y: 30,
    opacity: 0,
    stagger: 0.4,
    delay: 0.2
  });
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { pageTransition, contentAnimation } from "./utils/helpers";
import { barba } from '../node_modules/@barba/core';

import anim from "./utils/anim";
import "./scss/style.scss";

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

index.html (shows barba wrapper)

<body data-barba="wrapper">
  <main id="root"></main>
</body>

Answer 1

You can actually put the below code inside useEffect to create and load script in your index.js or which ever file you wish

useEffect(() => {

const script = document.createElement("script");
script.src = "localfilepath";
script.async = true;
script.defer = true;
document.body.append(script);

 }, []);

Answer 2

Your sequence of imports looks wrong. All node_modules should be imported first before local files like App.js

import React from "react";
import ReactDOM from "react-dom";
import { barba } from '../node_modules/@barba/core';


import { pageTransition, contentAnimation } from "./utils/helpers";
import anim from "./utils/anim";

import App from "./App";
import "./scss/style.scss";

Or you can lazy import module and initiate app on load success.

(async () => {
  // Dynamically imported module (runtime)
  await import('../node_modules/@barba/core');
  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);
})();

Read More: https://www.aleksandrhovhannisyan.com/blog/react-lazy-dynamic-imports/

How to include local script file on React page?

Question

2 answers

solution1
0 2021-10-10 17:45:48

solution2
0 2021-10-16 16:51:10

How to include local script file on React page?

Question

2 answers

solution1 0 2021-10-10 17:45:48

solution2 0 2021-10-16 16:51:10

solution1
0 2021-10-10 17:45:48

solution2
0 2021-10-16 16:51:10