Could not find a required file. Name: index.html

Question

I have been working on this React project, since a few months without having come across this error. I haven't made any changes in the location of the index.html file in the project tree, which is why I can't explain this error.

I have tried the following measures without success:

changing the location of public folder
changing the location of contents of public folder
changing the location of package-lock.json
changing the location of package.json
npm install
npm install react-scripts --save

Please find the error displayed in the terminal:

Could not find a required file.  
Name: index.html  
Searched in: /Users/Sujay/Documents/Documents/Learn Web Development the Hard Way/lacapsule/project/Dark Sky Map Bitbucket/darkskymap_frontend/public  
npm ERR! code ELIFECYCLE  
npm ERR! errno 1  
npm ERR! [email protected] start: `react-scripts start`  
npm ERR! Exit status 1  
npm ERR!   
npm ERR! Failed at the [email protected] start script.  
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Sujay/.npm/_logs/2019-08-06T07_12_22_366Z-debug.log

Expected result : React project should launch without any issue.   
Actual result: Error message in terminal mentioned above.

Jonathan Irwin · Accepted Answer · 2021-06-01 13:48:57Z

21

index.html has been moved/removed from the /public directory

Does your project have an index.html file in the public directory?

If not you can get the one that Create React App uses here

It should be in <your project root>/public/index.html

If you are using Git for version control it will be able to tell you if something was moved or removed.

Run git status to view changed files

edited Jun 1, 2021 at 13:48

answered Aug 6, 2019 at 7:55

Jonathan Irwin

5,8672 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sujay Over a year ago

Hello Jonathan, Thanks for taking the time to answer my question. My index.html file is indeed in the public directory. I had created the project with Create React App so I haven't altered the location of index.html which is still in the public folder. I use git for version control and I have checked my preceding commits. None of them involve changing the location of index.html. Moreover my colleagues have no problem launching the project with npm start. I have probably moved something without realising it but cannot figure out what.

Sujay Over a year ago

I think I will just delete the project and clone it from the origin repository. But this breaks the links with distant repos which is always a delicate thing to do. I am upvoting your anwser but not the check mark because my problem hasn't been solved yet. My upvote hasn't been taken into account because my reputation is below 15.

Sujay Over a year ago

You were right. The public folder was misplace. It was erroneously moved into the src folder instead of being at the root of the project.

DFSFOT Over a year ago

It's so stupid that react works this way. Angular just recreates anything you delete in the public folder.

Ajay Tom George · Accepted Answer · 2024-07-18 09:48:48Z

3

Your public folder might be missing,
just create another app using create-react-app
copy paste the public folder in this directory

edited Jul 18, 2024 at 9:48

answered Nov 9, 2021 at 19:39

Ajay Tom George

2,3672 gold badges19 silver badges29 bronze badges

1 Comment

Carminos Over a year ago

I'm having the same problem with my MERN stack app. I have three folders in my project root: client, admin and api. Current folder structure is [project root]/public/index.html. App works fine when index.html is saved this way. When I move my public folder into the client folder and run npm start I get "Can't find file. Name: index.html. Searched in public" . How should I save my index.html file so that it doesn't throw that error and both the frontend and backend of my app runs properly? My package.json file is in the root directory.

Dharman · Accepted Answer · 2022-02-15 21:00:27Z

2

I had the exact same problem. Both my package-lock and package.json were outside of the root folder. Once I moved them into the root folder it started up just fine.

edited Feb 15, 2022 at 21:00

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Feb 15, 2022 at 20:55

Peter May

296 bronze badges

Comments

isarojdahal · Accepted Answer · 2020-10-21 13:12:31Z

0

In my case, I have accidentally deleted the public directory so it couldn't find the index.html file

answered Oct 21, 2020 at 13:12

isarojdahal

1,2261 gold badge10 silver badges12 bronze badges

Comments

Brett East · Accepted Answer · 2023-06-29 04:15:55Z

Leaving this here in case you had the same issue as me and your index.html file is exactly where you want it and where you told app engine.

Add package.json to your .glcoudignore file at the root level of your project.

I had a tonne of issues with this and my exact setup had previously worked so I'm not sure what the issue was.

I'm using create-react-app (CRA) and my app.yaml file looks like this:

runtime: nodejs16
handlers:
# Serve all static files with url ending with a file extension
- url: /(.*\..+)$
  static_files: build/\1
  upload: build/(.*\..+)$
# Catch all handler to index.html
- url: /.*
  static_files: build/index.html
  upload: build/index.html

With CRA npm run build will build the project to a /build directory and place index.html inside it.

That app.yaml file should point at it and everything should be grand.

The issue though was that app engine will try and run npm start if it's in your package.json file. Changing the script name to dev instead of start still didn't work when I tried to deploy and instead I just had to include package.json in my .gcloudignore file.

This is a pain because it just means that I have to build the app before deploying always. But this is how I was able to get this to work after spending hours looking into the issue.

Ayman Anwar · Accepted Answer · 2024-06-07 01:53:57Z

-1

let config = {"contacts":[{"name":"ayman","title":"hsgvs","phone":"+967774404670","image":""}],"type":"ww-extended","call":"","brand":"","subtitle":"","welcome":"","size":"ww-normal","position":"ww-right","text":"","teamSize":"1","email":"[email protected]","toggle":true}; let s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://cdn.jsdelivr.net/gh/Bayanovart23/scriptForWidget@main/index.js'; let x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); s.onload = function () { tmWidgetInit(config) };

answered Jun 7, 2024 at 1:53

Ayman Anwar

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Could not find a required file. Name: index.html

6 Answers 6

index.html has been moved/removed from the /public directory

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

index.html has been moved/removed from the /public directory

4 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related