Question 220028 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Running a new React project

I’m just starting out on a Udemy React course so I’m pretty much a Terminal newbie….
I’ve downloaded the first React course project folder here:

/Users/iancraig/TRAINING/REACT/01-starting-setup

I’ve cd’d into this directory "01-starting-set-up" folder ok, and I’ve run "npm install"
However when I want to launch the server by running "npm start" it can’t find app.js.
I get:

"Error: Cannot find module ‘/Users/iancraig/TRAINING/REACT/01-starting-setup/app.js"

app.js is actually in its own folder (called "src") along with index.js and index.css. In this project its also called App.js with a capital A.

What’s happening here? Surely npm should be able to read into sub folders? How can I get it to launch the remote server? The package.json file has this:

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

Tags:

3

Answers


  1. 0

    The issue you’re facing is due to the mismatch in the name of the file "App.js" with a capital ‘A’ and the import statement in the "index.js" file. To resolve this, you need to make sure the import statement in "index.js" matches the filename exactly. In this case, it should be:

    import App from './src/App';

    Also, ensure that the "App.js" file is located in the correct path:

    /Users/iancraig/TRAINING/REACT/01-starting-setup/src/App.js

    After making these changes, you can try running "npm start" again, and it should launch the server successfully.

    Login or Signup to reply.
  2. 0

    The app.js file should place inside the src folder and its name should start with capital letter i.e. App.js and make sure you have properly import App.js file into you index.js file

    import App from './src/App';

    If all of above is ok then you app will run without an issue, you can run you app by using npm start command.

    Login or Signup to reply.
  3. 0

    It looks like you are using react-scripts for your React project, which is a common setup created by Create React App (CRA). By default, CRA expects the entry point of your application to be located at src/index.js. If your main component is named App.js, it should still work fine.
    The error you’re facing ("Cannot find module ‘/Users/iancraig/TRAINING/REACT/01-starting-setup/app.js") suggests that the app.js file is being referenced with a lowercase ‘a’ instead of the correct ‘A’ (App.js). This mismatch might be the cause of the issue.
    To fix this, make sure that any import statements or references to App.js inside your project use the correct filename with a capital ‘A’. For example, in your src/index.js file, you should have something like this:import React from ‘react’;
    import ReactDOM from ‘react-dom’;
    import App from ‘./App’; // Correct import statement with a capital ‘A’

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

    If you’ve already verified that the import statement for App.js is correct, and the issue persists, it’s possible that there might be some other configuration problem. In that case, please double-check your project structure and ensure that everything is set up as expected. If you’re still having issues, you might consider posting the relevant parts of your code or the folder structure to get more specific help.
    Remember, after correcting any file references, run npm start again, and it should launch the development server successfully. If there are no other issues, your React application should be accessible at http://localhost:3000.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search