React Module not found:-CodePudding

I'm just starting a project with the npx create-react-app, so far I only changed files in src folder. Here is the result of tree src command

src
├── components
│   └── App.js
├── index.css
└── index.js

But when I try to run my project I get:

       Failed to compile.
    
    Module not found: Error: Can't resolve './logo.svg' in '/home/mta/react/la-maison-jungle/src/components'
    ERROR in ./src/components/App.js 4:0-30
    Module not found: Error: Can't resolve './logo.svg' in '/home/mta/react/la-maison-jungle/src/components'

webpack compiled with 1 error

EDIT: Thnak for you're help, I somehow copy/paste the wrong error message, it's this one I'm struggling with:

Module not found: Error: Can't resolve '.components/App' in '/home/mta/react/la-maison-jungle/src'
ERROR in ./src/index.js 7:0-34
Module not found: Error: Can't resolve '.components/App' in '/home/mta/react/la-maison-jungle/src'

webpack compiled with 1 error

Is it beacause I deleted App.ccs ? Here is is my App.js ins src/components:

//import '.App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      </header>
    </div>
  );
}

export default App;

(i alreadt try to uncomment the import )

And here my index.js in src:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from '.components/App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

CodePudding user response：

In your App.js file, there is a line to import the logo.

import Logo from "./logo.svg";

Since you moved the file inside the components folder, either you need to move the logo.svg to the same folder, you need to change the import path of the logo.svg like this:

import Logo from "../logo.svg"

CodePudding user response：

the relative path is wrong,'./components/App' will be right

CodePudding user response：

since you moved your App.js to components folder, the ./logo.svg inside App.js route doesn't match now...that's why you're getting that error

CodePudding user response：

The problem rises as a result that you moved the App.js file to the Component folder. You need to move it back to src folder, that is how reactjs is structure by default. If you still want to go ahead and use the App.js in the new folder then you'd have to change relative paths from index.js.

import App from './components/App';