React Native Error: Module not found (I did't not have any ReactNative experience before)

Question

I just new learner in AWS and I need the React Native to work on together to upload the image in react native interface and compare it but I did not have any experience with React Native. When I move the pointer to const [visitorName, setVisitorName] = useState('placeholder.jpeg'); in function it is showing 'visitorName' is declared but its value is never read.ts(6133) Everyone know what wrong with my code why it display the issues that attached below? I need help guys, please help me, appreciate your help, thank you.

ERROR in ./src/App.js 91:11-47

Module not found: Error: Can't resolve './visitors/${visitorName}' in 'C:\Users\L\Downloads\AWS project\code\facial-recognition-app\src' webpack compiled with 1 error and 1 warning

Below are the code:

    import './App.css';
    import { useState } from 'react';
    const uuid = require('uuid');
    function App() {
      const [image, setImage] = useState('');
      const [uploadResultMessage, setUploadResultMessage] = useState('Please upload an image to authenticate.');
      const [visitorName, setVisitorName] = useState('placeholder.jpeg');
      const [isAuth, setAuth] = useState(false);
      function sendImage(e) {
        e.preventDefault();
        setVisitorName(image.name);
        const visitorImageName = uuid.v4();
        fetch('url/${visitorImageName}.jpeg', {
          method: 'PUT',
          headers: {
            'Content-Type': 'image/jpeg'
          },
          body: image
        }).then(async () => {
          const response = await authenticate(visitorImageName);
          if (response.Message === 'Success') {
            setAuth(true);
            setUploadResultMessage('Hi ${response["firstName"]} ${response["lastName"]}, welcome to work.')
          } else {
            setAuth(false);
            setUploadResultMessage('Authentication Failed: this person is not an employee.')
          }
        }).catch(error => {
          setAuth(false);
          setUploadResultMessage('There is an error during the authentication process. Please try again later')
          console.error(error);
        })
      }
      async function authenticate(visitorImageName) {
        const requestUrl = 'url' + new URLSearchParams(
          { objectKey: '${visitorImageName}.jpeg' }
        );
        return await fetch(requestUrl, {
          method: 'GET',
          headers: {
            'Accept': 'application/json'
          }
        }).then(response => response.json()).then((data) => { return data; }).catch(error => console.error(error));
      }
      return (
        <div className="App">
          <h2>Facial Recognition System</h2>
          <form onSubmit={sendImage}>
            <input type='file' name='image' onChange={e => setImage(e.target.files[0])} />
            <button type='submit'>Authenticate</button>
          </form>
          <div className={isAuth ? 'success' : 'failure'}>{uploadResultMessage}</div>
          **<img src={ require('./visitors/${visitorName}')} alt="Visitors" height={250} width={250} />**
        </div>
      );
    }
    export default App;

KreaN · Answer 1 · 2023-08-12T10:36:02.113

0

You should import your placeholder.jpg image from assets. import “placeholder.jpeg” as placeholder from “./assets/“(something like this because I don’t know your folder structure)

After that you should change your use state from const [visitorName, setVisitorName] = useState('placeholder.jpeg'); To const [visitorName, setVisitorName] = useState({placeholder}); I hope this will solve your problem

edited Aug 12 '23 at 10:36

answered Aug 12 '23 at 10:35

KreaN

3
3

Hello, that means I need to declare the assets first? How can I declare the import, any syntax example? Currently my folder structure is Download--> AWS Project --> Code --> facial-recognition-app --> src. Appreciate your help, thank you. – I Can Done Aug 12 '23 at 11:05
You can check out this page mate. https://www.tutorialspoint.com/react_native/react_native_images.htm – KreaN Aug 12 '23 at 13:02

React Native Error: Module not found (I did't not have any ReactNative experience before)

1 Answers1