未找到模块错误：您尝试导入项目 src/ 目录之外的内容。 不支持 src/ 之外的相对导入

Question

I am currently making a music player app on React, and am new to React js. Not sure why i'm getting this error, having been following the exact steps on the tutorial I'm watching.

The full Error Code is:

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

For better clarity, This is the code for the Player component:

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;

And this is the Code on 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;

Here is the folder structure:

Appreciate your time!

Answer 1

I think path for your Player component is incorrect

import Player from "../components/Player";

Try this:

import Player from "./components/Player";

Answer 2

Your components folder should be under the src folder, then set the path carefully.