Estoy usando el componente react-player para esto.

Tengo el archivo 1 donde almaceno algunos datos como una matriz, incluido un video local.

 import videoSample from "../assets/videos/sample-video.mov"; export const Data = { ProjectList: [ { title: "My title", desc: "Some description", videoUrl: { videoSample }, sourceUrl: "https:// ... ", }, ], };

El archivo 2 toma la matriz y asigna cada elemento a un componente de React llamado ProjectDetail .

 function MappingFunction() { return ( <> {Data.ProjectList.map((project, index) => ( <ProjectDetail key={index} {...project} /> ))} </> ); }

Finalmente, este es el archivo 3 que contiene ProjectDetail . Toma el elemento de la matriz como accesorios. videoUrl se pasa al componente ReactPlayer .

 export default function ProjectDetail(props) { return ( <> <div> <ReactPlayer url={props.videoUrl} // does not work! width="500px" /> </div> <div> <h2>{props.title}</h2> // works <p>{props.desc}</p> // works <button onClick={() => { window.open(props.sourceUrl, "_blank"); }} // works > Click to see more </button> </div> </> ); }

title , desc y sourceUrl funcionan bien, pero no entiendo que videoUrl no lo haga. Intenté buscar una respuesta pero no tuve éxito.

Si importo videoSample en el archivo 3 directamente, funciona bien, pero no cuando se pasa como accesorio desde el exterior. ¿Qué me estoy perdiendo?