Actualmente estoy creando una aplicación de reproductor de música en React y soy nuevo en React js. No estoy seguro de por qué recibo este error, después de haber seguido los pasos exactos en el tutorial que estoy viendo.

El código de error completo es:

 Module not found: Error: You attempted to import ../components/Player which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

Para mayor claridad, este es el código para el componente Player:

 import React from 'react'; import PlayerDetails from './PlayerDetails'; function Player(props) { return ( <div className="c-player"> <audio></audio> <h4>Now playing</h4> <PlayerDetails song={props.song}/> {/*CONTROLS */} <p><strong> Next Up:</strong> {props.nextSong.title} {props.nextSong.artist}</p> </div> ); } export default Player;

Y este es el Código en App.js:

 import { useState } from "react"; import Player from "../components/Player"; function App() { const [songs, setSongs]= useState([ { title: "1", artist: "1", img_src: "./images/song-1.jpg/", src: "./music/song-1.mp3" }, { title: "2", artist: "2", img_src: "./images/song-2.jpg/", src: "./music/song-2.mp3" }, { title: "3", artist: "3", img_src: "./images/song-3.jpg/", src: "./music/song-3.mp3" }, { title: "4", artist: "4", img_src: "./images/song-4.jpg/", src: "./music/song-4.mp3" } ]); const [currentSongIndex, setCurrentSongIndex]= useState(0); const [nextSongIndex, setnextSongIndex]= useState (currentSongIndex + 1); return ( <div className="App"> <Player songs= {songs[currentSongIndex]} nextSong={songs[nextSongIndex]} /> </div> ); } export default App;

Aquí está la estructura de carpetas:

¡Aprecia tu tiempo!