React项目报错：无法解析'./NewsItem'模块，请求协助排查

错误信息：

Module not found: Error: Can't resolve './NewsItem' in 'C:\Users\Admin\Downloads\js\newsapp\src\components'
ERROR in ./src/components/News.js 6:0-34
Module not found: Error: Can't resolve './NewsItem' in 'C:\Users\Admin\Downloads\js\newsapp\src\components'

NewsItem组件代码：

import React from "react";

const NewsItem = (props) => {
  let { title, description, imageUrl, newsUrl, author, date, source } = props;
  return (
    <div className="my-3">
      <div className="card">
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            position: "absolute",
            right: "0",
          }}
        >
          <span className="badge rounded-pill bg-danger"> {source} </span>
        </div>
        <img
          src={
            !imageUrl
              ? "https://fdn.gsmarena.com/imgroot/news/21/08/xiaomi-smart-home-india-annoucnements/-476x249w4/gsmarena_00.jpg"
              : imageUrl
          }
          className="card-img-top"
          alt="..."
        />
        <div className="card-body">
          <h5 className="card-title">{title} </h5>
          <p className="card-text">{description}</p>
          <p className="card-text">
            <small className="text-muted">
              By {!author ? "Unknown" : author} on{" "}
              {new Date(date).toGMTString()}
            </small>
          </p>
          <a
            rel="noreferrer"
            href={newsUrl}
            target="_blank"
            className="btn btn-sm btn-dark"
          >
            Read More
          </a>
        </div>
      </div>
    </div>
  );
};

export default NewsItem;

解决步骤 #

• 核对文件命名与路径
  确认NewsItem.js和News.js在同一个src/components目录下。Windows系统文件名区分大小写，必须保证文件名是NewsItem.js（不能是newsitem.js、Newsitem.js等变体），和News.js里的导入语句完全匹配。
• 补充文件扩展名
  如果项目未配置webpack省略.js扩展名，导入时需加上后缀：import NewsItem from './NewsItem.js'。
• 确认文件存在性
  手动打开C:\Users\Admin\Downloads\js\newsapp\src\components目录，检查NewsItem.js是否确实存在，没有被误删或移动到其他子文件夹。
• 重启开发服务器
  缓存可能导致模块解析异常，停止当前npm start进程后重新启动，再验证报错是否消失。

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