this is very strange. I am using gatsby, and this code is contained in a functional component. In my real code, depending on a condition a JSON is loaded. the path of the json is correct. I have this code (I have the path of json in a var):

const LoadAnimation = async () => {
    const currentQuizzAnimationFile =
        '../../assets/lottie/Baseball_Loop_Perfect.json';
    const currentQuizzAnimation = await require(currentQuizzAnimationFile);
    console.log(currentQuizzAnimationFile);
};

with previous lines I am getting this problem:

Uncaught (in promise) Error: Cannot find module './../../assets/lottie/Baseball_Loop_Perfect.json'

But if I do (I pass the path of json directly):

//const currentQuizzAnimationFile ='../../assets/lottie/Baseball_Loop_Perfect.json';
const currentQuizzAnimation = await require('../../assets/lottie/Baseball_Loop_Perfect.json');

the json is perfectly read. the problem is that my son may be load by a var

I call my function using a useEffect.

useEffect(() => {
    LoadAnimation();
},[])

If I use Axios, or fetch the result of this json is a empty json.

what is the problem, and how can fix it?