React模块未找到错误：已尝试多种排查方案仍无法解决

问题概述 #

我是React新手，尝试在AllMeetups.js中导入MeetupList.js组件时失败，编译报错。

文件结构（描述的预期结构） #

src
|-- components
|   |-- meetups
|   |   |-- MeetupList.js
|   |   |-- MeetupItem.js
|-- pages
|   |-- AllMeetups.js

编译报错信息 #

Compiled with problems:
ERROR in ./src/components/pages/AllMeetups.js 4:0-61
Module not found: Error: Can't resolve '../components/meetups/MeetupList.js' in '/home/zoren/my-react-app/src/components/pages'

相关代码 #

AllMeetups.js #

import MeetupList from "../components/meetups/MeetupList";
import classes from "./AllMeetups.module.css";

const DUMMY_DATA = [
  {
    id: "m1",
    title: "This is a first meetup",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Stadtbild_M%C3%BCnchen.jpg/2560px-Stadtbild_M%C3%BCnchen.jpg",
    address: "Meetup street 5, 12345 Meetup City",
    description:
      "This is a first, amazing meetup which you definitely should not miss. It will be a lot of fun!",
  },
  {
    id: "m2",
    title: "This is a second meetup",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Stadtbild_M%C3%BCnchen.jpg/2560px-Stadtbild_M%C3%BCnchen.jpg",
    address: "Meetup street 5, 12345 Meetup City",
    description:
      "This is a first, amazing meetup which you definitely should not miss. It will be a lot of fun!",
  },
];

function AllMeetupsPage() {
  return (
    <section className={classes.header}>
      <h1> All Meetups</h1>
      <MeetupList meetups= {DUMMY_DATA} />
    </section>
  );
}

export default AllMeetupsPage;

MeetupList.js #

import MeetupItem from "./meetups/MeetupItem";
import classes from "./MeetupList.module.css";

function MeetupList(props) {
  return (
    <ul className={classes.list}>
      {props.meetups.map((meetup) => (
        <MeetupItem
          key={meetup.id}
          id={meetup.id}
          image={meetup.image}
          title={meetup.title}
          address={meetup.address}
          description={meetup.description}
        />
      ))}
    </ul>
  );
}

export default MeetupList;

MeetupItem.js #

import classes from "./MeetupItem.module.css";

function MeetupItem(props) {
  return (
    <li className={classes.item}>
      <div className={classes.image}>
        <img src={props.img} alt={props.title} />
      </div>
      <div className={classes.content}>
        <h3> TITLE</h3>
        <address>{props.title}</address>
        <p> {props.description}</p>
      </div>
      <div className={classes.actions}>
        <button> To Favorites </button>
      </div>
    </li>
  );
}
export default MeetupItem;

已尝试的无效方案 #

• 更新react-dom及NPM至最新版本
• 验证文件路径
• 删除重建文件
• 重启开发服务器
• 检查导入语句拼写
• 清理npm缓存
• 删除node_modules后重装依赖
• 检查循环依赖及Node.js和NPM版本
• 校验package.json

修复步骤 #

1. 修正文件结构或导入路径 #

从报错信息看，AllMeetups.js实际位于src/components/pages/，而非描述中的src/pages/。对应导入路径需要调整：
将AllMeetups.js中的导入语句改为：

import MeetupList from "../meetups/MeetupList";

如果要符合描述的预期结构，需将AllMeetups.js移动到src/pages/目录下，此时原导入语句import MeetupList from "../components/meetups/MeetupList";即可正常工作。

2. 修正MeetupList.js中的MeetupItem导入路径 #

MeetupList.js和MeetupItem.js在同一目录src/components/meetups/，所以导入路径应改为：

import MeetupItem from "./MeetupItem";

3. 修复MeetupItem.js的props接收错误 #

当前MeetupItem中存在props匹配错误：

• 将props.img改为props.image（对应MeetupList传递的image属性）
• 将<address>{props.title}</address>改为<address>{props.address}</address>
• 将<h3> TITLE</h3>改为<h3>{props.title}</h3>

完成以上修改后，重启开发服务器即可解决导入问题并正确渲染组件。

内容的提问来源于stack exchange，提问作者Zoren Aguilar