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

Question

我目前正在 React 上制作一个音乐播放器应用程序，并且是 React js 的新手。不知道为什么我会收到此错误，因为我一直按照我正在观看的教程中的确切步骤进行操作。

完整的错误代码是：

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

为了更清楚起见，这是 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;

这是 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;

这是文件夹结构：

感谢您的时间！

Answer 1

我认为您的 Player 组件的路径不正确

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

尝试这个：

import Player from "./components/Player";