I am building a react-app front-end for Amazon AWS S3 and I am having trouble importing the 'Upload' and 'Results' components from the 'components' folder. The 'Upload.js' and 'Results.js' files are located in the 'src/components' folder, but when I try to run "npm start" I get the error "Module not found: Error: Can't resolve './components/Upload' in 'C:\Users\luisj\Desktop\awsapp\awsapp\src\components'". How can I properly import these components in my App.js file?

**

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;

I am trying to create a react-app front-end for amazon aws s3 where a user can upload multiple images to a s3 bucket at once as input. I have created a file for the Upload component (Upload.js) and another for the Results component (Results.js) and have imported them in my App.js file. However, when I run "npm start" I get the following errors:

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'

I have double checked that the files are located in the correct directory (src/components) and have also tried importing them using different variations such as './Upload' and './Results' but still get the same error. I am expecting the App.js file to recognize the imported components and for the app to successfully run.

CodePudding user response：

You have a simple import path definition issue.

Try to move your App.js file to the root of the src/ so it's src/App.js

The problem is you are referencing ./components/Uploads.js. The ./ type of definition defines a path route from the current directory. So, when you are referencing this from App.js which is a sibling of the other two, the program is trying to find src/components/components/Upload.js, and of course that route does not exist right?

So, you can do two things. You can move the App.js file one level up, or you can modify the import definition to:

import Upload from './Upload';

That should leave your app working again.