React Deploy failed Cannot find file

Hi Guys,

I’m trying to deploy my React app with create-react-app. It keeps failing after it tries to run the build command. It builds fine locally but keeps telling: Cannot find file

I’ve tried to clear cache, uninstall node, and reinstall node. But still receiving similar errors. Am I on the right track for debugging issue? See below log and github link. Thanks in advance!!

2:57:12 PM: ​

2:57:12 PM: $ npm run build

2:57:12 PM: > v1.0.0@0.1.0 build

2:57:12 PM: > react-scripts build

2:57:14 PM: Creating an optimized production build…

2:57:16 PM: Failed to compile.

2:57:16 PM:

2:57:16 PM: ./src/App.js

2:57:16 PM: Cannot find file ‘./Components/Header/Header.js’ in ‘./src’.

3:23:02 PM: Build exceeded maximum allowed runtime

full log: https://app.netlify.com/sites/inhyechoi/deploys/603d704e97232e000784a34e

github tree: https://github.com/inhyechoi/inhyechoi-portfolio/tree/inhyechoi

Hey there, thanks for reaching out.

What you are describing sounds a bit like a an issue with case sensitivity on our system.

Can you give this a read through and let us know if that fixes the issue?

this also might be helpful

If you are still having problems, please provide as much information as you can on what you have already tried, what your build settings are, your package.json, etc. Thanks!

Hi perry,

I tried to see if there is any issue with case sensitivity and couldn’t find it. Followings are steps I have done so far.

  • checked build setting

  • switched between zsh to bash

  • Checked node in package.json

The url name is https://inhyechoi.netlify.app/

Below is the build setting

Repository: github.com/inhyechoi/inhyechoi-portfolio
Base directory: Not set
Build command: npm run build
Publish directory: build/
Deploy log visibility: Logs are public
Builds: Active

Below is full package.json

{
“tag_name”: “v1.0.0”,
“target_commitish”: “master”,
“name”: “v1.0.0”,
“body”: “Description of the release”,
“draft”: false,
“prerelease”: false,
“author”: “inhyechoi”,
“version”: “0.1.0”,
“private”: true,
“homepage”: “https://inhyechoi.netlify.app/”,
“dependencies”: {
@fortawesome/fontawesome-svg-core”: “^1.2.32”,
@fortawesome/free-brands-svg-icons”: “^5.15.1”,
@fortawesome/free-regular-svg-icons”: “^5.15.1”,
@fortawesome/free-solid-svg-icons”: “^5.15.1”,
@fortawesome/react-fontawesome”: “^0.1.12”,
“bootstrap”: “^4.6.0”,
“classnames”: “^2.2.6”,
“fsevents”: “^2.3.2”,
“gh-pages”: “^2.1.1”,
“gooey-react”: “^1.1.0”,
“gsap”: “^3.5.1”,
“gulp”: “^4.0.2”,
“jquery”: “^3.5.1”,
“node”: “^15.8.0”,
“node-sass”: “^4.14.1”,
“npm”: “^7.2.0”,
“react”: “^16.14.0”,
“react-bootstrap”: “^1.5.0”,
“react-burger-menu”: “^2.9.0”,
“react-dom”: “^16.14.0”,
“react-gsap”: “^2.2.1”,
“react-hook-form”: “^6.9.6”,
“react-redux”: “^7.2.1”,
“react-router”: “^5.2.0”,
“react-router-dom”: “^5.2.0”,
“react-scripts”: “^4.0.3”,
“react-scrollmagic”: “^2.2.0”,
“react-slick”: “^0.27.12”,
“react-sound”: “^1.2.0”,
“redux”: “^4.0.5”,
“scrollmagic”: “^2.0.8”,
“slick-carousel”: “^1.8.1”,
“typescript”: “^4.0.3”
},
“scripts”: {
“start”: “NODE_PATH=src react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“predeploy”: “npm run build”,
“deploy”: “netlify deploy”,
“eject”: “react-scripts eject”
},
“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
},
“devDependencies”: {
“prettier”: “2.0.5”
},
“description”: “InhyeChoi’s portfolio repo”,
“main”: “index.js”,
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/inhyechoi/inhyechoi-portfolio.git”
},
“license”: “ISC”,
“bugs”: {
“url”: “Issues · inhyechoi/inhyechoi-portfolio · GitHub
},
“optionalDependencies”: {
“fsevents”: “^2.3.2”
}
}

Do I need to rename files(for example, MobileMenu.js Header.js etc) all to lowercase? Thanks!

I think you need to check the case sensitivity problem in the files in your repo. Once you navigate to your repo on GitHub, individually check for all files if their name cases are exactly the same as local ones. While that is usually what case-sensitivity error is, it’s not true in your case.

Your problem is that, your repo doesn’t have the file at all:

thanks for your feedback, but that’s strange as I can see more files in Github as below. Am I missing steps in build command?

npm start, npm run build, npm run build --prod
netlify deploy (used to work, but it’s throwing netlify: command not found)

I see the problem, you’ve two folders:

image

and you’re importing the component from the first one (the capital one) in which it doesn’t exist.

1 Like

It’s working now! Thank you sooooo much I appreciate your help