Esto es muy extraño. Estoy usando gatsby y este código está contenido en un componente funcional. En mi código real, dependiendo de una condición, se carga un JSON. la ruta del json es correcta. Tengo este código (tengo la ruta de json en una var):

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

con las lineas anteriores me sale este problema:

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

Pero si lo hago (paso la ruta de json directamente):

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

el json se lee perfectamente. el problema es que a mi hijo se le puede cargar una var

Llamo a mi función usando un useEffect .

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

Si uso Axios , o fetch el resultado de este json es un json vacío.

¿Cuál es el problema y cómo se puede solucionar?