问模块未找到错误:您试图导入位于项目src/目录之外的内容。不支持src/以外的相对导入。

EN

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/.

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;

 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;