Skip to content

Commit 78882d5

Browse files
sbritoigTimer
sbritoig
authored andcommitted
adding a note on how to resolve "Could not find a required file." dep… (#1391)
* adding a note on how to resolve "Could not find a required file." deployment errors because of deleted or ignored files * Tweak * Unrelated style nits
1 parent fd248ec commit 78882d5

File tree

1 file changed

+34
-15
lines changed

1 file changed

+34
-15
lines changed

packages/react-scripts/template/README.md

+34-15
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ Start your app by running `npm start`, and start debugging in VS Code by pressin
283283

284284
You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else.
285285

286-
Note that normally you wouldn't edit files in the `public` folder very often. For example, [adding a stylesheet](#adding-a-stylesheet) is done without touching the HTML.
286+
Note that normally you wouldnt edit files in the `public` folder very often. For example, [adding a stylesheet](#adding-a-stylesheet) is done without touching the HTML.
287287

288288
If you need to dynamically update the page title based on the content, you can use the browser [`document.title`](https://developer.mozilla.org/en-US/docs/Web/API/Document/title) API. For more complex scenarios when you want to change the title from React components, you can use [React Helmet](https://github.com/nfl/react-helmet), a third party library.
289289

@@ -721,7 +721,7 @@ Note that the caveats from the above section apply:
721721

722722
### Adding Temporary Environment Variables In Your Shell
723723

724-
Defining environment variables can vary between OSes. It's also important to know that this manner is temporary for the
724+
Defining environment variables can vary between OSes. Its also important to know that this manner is temporary for the
725725
life of the shell session.
726726

727727
#### Windows (cmd.exe)
@@ -1173,7 +1173,7 @@ For an example, a simple button component could have following states:
11731173

11741174
Usually, it’s hard to see these states without running a sample app or some examples.
11751175

1176-
Create React App doesn't include any tools for this by default, but you can easily add [React Storybook](https://github.com/kadirahq/react-storybook) to your project. **It is a third-party tool that lets you develop components and see all their states in isolation from your app**.
1176+
Create React App doesnt include any tools for this by default, but you can easily add [React Storybook](https://github.com/kadirahq/react-storybook) to your project. **It is a third-party tool that lets you develop components and see all their states in isolation from your app**.
11771177

11781178
![React Storybook Demo](http://i.imgur.com/7CIAWpB.gif)
11791179

@@ -1215,7 +1215,7 @@ cd build
12151215
python -m SimpleHTTPServer 9000
12161216
```
12171217

1218-
If you're using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this:
1218+
If youre using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this:
12191219

12201220
```javascript
12211221
const express = require('express');
@@ -1281,9 +1281,9 @@ See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azu
12811281

12821282
### Firebase
12831283

1284-
Install the Firebase CLI if you haven't already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account.
1284+
Install the Firebase CLI if you havent already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account.
12851285

1286-
Then run the `firebase init` command from your project's root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`.
1286+
Then run the `firebase init` command from your projects root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`.
12871287

12881288
```sh
12891289
=== Project Setup
@@ -1388,7 +1388,7 @@ Then run:
13881388
npm run deploy
13891389
```
13901390
1391-
#### Step 4: Ensure your project's settings use `gh-pages`
1391+
#### Step 4: Ensure your projects settings use `gh-pages`
13921392
13931393
Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch:
13941394
@@ -1400,7 +1400,7 @@ You can configure a custom domain with GitHub Pages by adding a `CNAME` file to
14001400
14011401
#### Notes on client-side routing
14021402
1403-
GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
1403+
GitHub Pages doesnt support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
14041404
14051405
* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router.
14061406
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
@@ -1410,27 +1410,46 @@ GitHub Pages doesn't support routers that use the HTML5 `pushState` history API
14101410
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).<br>
14111411
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
14121412
1413-
#### Resolving "Module not found: Error: Cannot resolve 'file' or 'directory'"
1413+
#### Resolving Heroku Deployment Errors
14141414
1415-
Sometimes `npm run build` works locally but fails during deploy via Heroku with an error like this:
1415+
Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases.
1416+
1417+
##### "Module not found: Error: Cannot resolve 'file' or 'directory'"
1418+
1419+
If you get something like this:
14161420
14171421
```
14181422
remote: Failed to create a production build. Reason:
14191423
remote: Module not found: Error: Cannot resolve 'file' or 'directory'
14201424
MyDirectory in /tmp/build_1234/src
14211425
```
14221426
1423-
This means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
1427+
It means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
14241428
14251429
This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes.
14261430
1431+
##### "Could not find a required file."
1432+
1433+
If you exclude or ignore necessary files from the package you will see a error similar this one:
1434+
1435+
```
1436+
remote: Could not find a required file.
1437+
remote: Name: `index.html`
1438+
remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
1439+
remote:
1440+
remote: npm ERR! Linux 3.13.0-105-generic
1441+
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
1442+
```
1443+
1444+
In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`.
1445+
14271446
### Modulus
14281447
14291448
See the [Modulus blog post](http://blog.modulus.io/deploying-react-apps-on-modulus) on how to deploy your react app to Modulus.
14301449
14311450
## Netlify
14321451
1433-
**To do a manual deploy to Netlify's CDN:**
1452+
**To do a manual deploy to Netlifys CDN:**
14341453
14351454
```sh
14361455
npm install netlify-cli
@@ -1467,7 +1486,7 @@ See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-t
14671486
14681487
### Surge
14691488
1470-
Install the Surge CLI if you haven't already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You just need to specify the *build* folder and your custom domain, and you are done.
1489+
Install the Surge CLI if you havent already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You just need to specify the *build* folder and your custom domain, and you are done.
14711490
14721491
```sh
14731492
email: email@domain.com
@@ -1535,7 +1554,7 @@ brew reinstall watchman
15351554
15361555
You can find [other installation methods](https://facebook.github.io/watchman/docs/install.html#build-install) on the Watchman documentation page.
15371556
1538-
If this still doesn't help, try running `launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist`.
1557+
If this still doesnt help, try running `launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist`.
15391558
15401559
There are also reports that *uninstalling* Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.
15411560
@@ -1546,7 +1565,7 @@ It is reported that `npm run build` can fail on machines with no swap space, whi
15461565
### `npm run build` fails on Heroku
15471566
15481567
This may be a problem with case sensitive filenames.
1549-
Please refer to [this section](#resolving-module-not-found-error-cannot-resolve-file-or-directory).
1568+
Please refer to [this section](#resolving-heroku-deployment-errors).
15501569
15511570
## Something Missing?
15521571

0 commit comments

Comments
 (0)