React AWS S3项目中Upload/Results组件导入失败求助

我正在构建基于Amazon AWS S3的React应用前端，已将Upload.js和Results.js组件文件放置在src/components目录下，但在App.js中导入这两个组件后，执行npm start时出现以下错误：

ERROR in ./src/components/App.js 6:0-41
Module not found: Error: Can't resolve './components/Upload' in 'C:\Users\luisj\Desktop\awsapp\awsapp\src\components'
ERROR in ./src/components/App.js 7:0-43
Module not found: Error: Can't resolve './components/Results' in 'C:\Users\luisj\Desktop\awsapp\awsapp\src\components'

已确认文件路径正确，尝试修改为'./Upload'和'./Results'等导入路径仍无效，期望App.js能正确识别组件并成功运行应用。

相关代码 #

App.js

import React, { useState } from 'react';
import Upload from './components/Upload';
import Results from './components/Results';

function App() {
const [results] = useState([]);

const handleUpload = (files) => {
// call the lambda function to send the files to Amazon Rekognition
// and update the results state with the returned data
}

const handleDownload = () => {
// handle the download of the results CSV file
}

return (
<div className="App">
<Upload onUpload={handleUpload} />
<Results results={results} onDownload={handleDownload} />
</div>
);
}

export default App;

Results.js

import React, { Component } from 'react';


class Results extends Component {
    constructor(props) {
        super(props);

        this.state = {
            results: []
        };
    }

    updateResults(newResults) {
        this.setState({
            results: newResults
        });
    }

    renderResults() {
        if (this.state.results.length === 0) {
            return <p>No results yet.</p>;
        } else {
            return (
                <table>
                    <thead>
                        <tr>
                            <th>Image</th>
                            <th>Label</th>
                            <th>Confidence</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.results.map((result, index) => (
                            <tr key={index}>
                                <td>{result.image}</td>
                                <td>{result.label}</td>
                                <td>{result.confidence}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            );
        }
    }

    render() {
        return (
            <div>
                <h2>Results</h2>
                {this.renderResults()}
            </div>
        );
    }
}

export default Results;

Upload.js

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { v4 as uuidv4 } from 'uuid';
import { S3 } from 'aws-sdk';

import { setUploadedImages } from './actions';

const Upload = () => {
  const [files, setFiles] = useState([]);
  const dispatch = useDispatch();

  const handleFileChange = (event) => {
    setFiles(event.target.files);
  };

  const handleUpload = async () => {
    // Initialize S3 client with your credentials
    const s3 = new S3({
      accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
      secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
    });

    // Create an array to store the S3 object keys for the uploaded files
    const uploadedImages = [];

    // Loop through the selected files
    for (let i = 0; i < files.length; i++) {
      const file = files[i];

      // Generate a unique key for the S3 object
      const key = `${uuidv4()}-${file.name}`;

      // Upload the file to the S3 bucket
      await s3
        .upload({
          Bucket: process.env.REACT_APP_AWS_BUCKET_NAME,
          Key: key,
          Body: file,
        })
        .promise();

      // Add the S3 object key to the array
      uploadedImages.push(key);
    }

    // Dispatch the action to set the uploaded images in the store
    dispatch(setUploadedImages(uploadedImages));
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
};

export default Upload;

1. 修正导入路径
   根据错误路径可知，App.js已处于src/components目录下，与Upload.js、Results.js同目录，因此导入时无需额外嵌套路径，将App.js的导入语句改为：

   import Upload from './Upload';
   import Results from './Results';
   

2. 检查文件名大小写
   Windows系统文件名不区分大小写，但Webpack等构建工具严格区分大小写。确认实际文件名是Upload.js/Results.js，导入时大小写需完全匹配。

3. 验证文件存在性与拼写
   手动打开C:\Users\luisj\Desktop\awsapp\awsapp\src\components目录，确认两个组件文件存在，且文件名无拼写错误（如少写字母、多余符号）。

4. 清理缓存并重启服务
   Webpack缓存可能导致路径识别异常，操作步骤：

   • 终止当前npm start进程
   • 删除项目根目录下的node_modules/.cache文件夹
   • 重新执行npm start

5. 检查依赖文件
   注意Upload.js中导入了./actions，需确认src/components目录下存在actions.js文件，否则会引发新的构建错误。

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