Netlfy React build fails but it works localy - reactjs

Question

When I run the build on Netlify it fails, but when I run it on my local windows pc it runs like a charm
This is is the Netlify output (The error occurs when Netlify runs the build comand):
10:32:27 PM: Build ready to start
10:32:29 PM: build-image version: 3031d4c9e432fd7016f6279fc9ad706f9205d845
10:32:29 PM: build-image tag: v3.3.17
10:32:29 PM: buildbot version: 1f35b3abd6e2bf5230d8edf68072840fdec1513f
10:32:29 PM: Fetching cached dependencies
10:32:30 PM: Failed to fetch cache, continuing with build
10:32:30 PM: Starting to prepare the repo for build
10:32:30 PM: No cached dependencies found. Cloning fresh repo
10:32:30 PM: git clone https://github.com/ChristofferHennie/api-webapp-easyapi
10:32:31 PM: Preparing Git Reference refs/heads/master
10:32:32 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'build' versus 'build/' in the Netlify UI
10:32:32 PM: Starting build script
10:32:32 PM: Installing dependencies
10:32:32 PM: Python version set to 2.7
10:32:34 PM: v12.18.0 is already installed.
10:32:34 PM: Now using node v12.18.0 (npm v6.14.4)
10:32:34 PM: Started restoring cached build plugins
10:32:35 PM: Finished restoring cached build plugins
10:32:35 PM: Attempting ruby version 2.7.1, read from environment
10:32:36 PM: Using ruby version 2.7.1
10:32:36 PM: Using PHP version 5.6
10:32:36 PM: 5.2 is already installed.
10:32:36 PM: Using Swift version 5.2
10:32:36 PM: Started restoring cached node modules
10:32:36 PM: Finished restoring cached node modules
10:32:37 PM: Installing NPM modules using NPM version 6.14.4
10:33:09 PM: > core-js#2.6.11 postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js
10:33:09 PM: > node -e "try{require('./postinstall')}catch(e){}"
10:33:09 PM: > core-js#3.6.5 postinstall /opt/build/repo/node_modules/core-js
10:33:09 PM: > node -e "try{require('./postinstall')}catch(e){}"
10:33:09 PM: > core-js-pure#3.6.5 postinstall /opt/build/repo/node_modules/core-js-pure
10:33:09 PM: > node -e "try{require('./postinstall')}catch(e){}"
10:33:11 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
10:33:11 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
10:33:11 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
10:33:11 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
10:33:11 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.13 (node_modules/jest-haste-map/node_modules/fsevents):
10:33:11 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
10:33:11 PM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#2.1.2 (node_modules/fsevents):
10:33:11 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
10:33:11 PM: added 1679 packages from 795 contributors and audited 1683 packages in 33.786s
10:33:13 PM: 59 packages are looking for funding
10:33:13 PM: run `npm fund` for details
10:33:13 PM: found 1 low severity vulnerability
10:33:13 PM: run `npm audit fix` to fix them, or `npm audit` for details
10:33:13 PM: NPM modules installed
10:33:13 PM: Started restoring cached go cache
10:33:13 PM: Finished restoring cached go cache
10:33:13 PM: go version go1.14.4 linux/amd64
10:33:13 PM: go version go1.14.4 linux/amd64
10:33:13 PM: Installing missing commands
10:33:13 PM: Verify run directory
10:33:15 PM: ​
10:33:15 PM: ┌─────────────────────────────┐
10:33:15 PM: │ Netlify Build │
10:33:15 PM: └─────────────────────────────┘
10:33:15 PM: ​
10:33:15 PM: ❯ Version
10:33:15 PM: #netlify/build 2.0.10
10:33:15 PM: ​
10:33:15 PM: ❯ Flags
10:33:15 PM: deployId: 5ef266db8af236000856f030
10:33:15 PM: mode: buildbot
10:33:15 PM: ​
10:33:15 PM: ❯ Current directory
10:33:15 PM: /opt/build/repo
10:33:15 PM: ​
10:33:15 PM: ❯ Config file
10:33:15 PM: No config file was defined: using default values.
10:33:15 PM: ​
10:33:15 PM: ❯ Context
10:33:15 PM: production
10:33:15 PM: ​
10:33:15 PM: ┌────────────────────────────────┐
10:33:15 PM: │ 1. Build command from settings │
10:33:15 PM: └────────────────────────────────┘
10:33:15 PM: ​
10:33:15 PM: $ npm run build
10:33:15 PM: > api-webapi-easyapi#0.1.0 build /opt/build/repo
10:33:15 PM: > react-scripts build
10:33:16 PM: Creating an optimized production build...
10:33:19 PM: Failed to compile.
10:33:19 PM:
10:33:19 PM: ./src/App.js
10:33:19 PM: Cannot find file './components/pages/About' in './src'.
10:33:19 PM: npm ERR! code ELIFECYCLE
10:33:19 PM: npm ERR! errno 1
10:33:19 PM: npm ERR! api-webapi-easyapi#0.1.0 build: `react-scripts build`
10:33:19 PM: npm ERR! Exit status 1
10:33:19 PM: npm ERR!
10:33:19 PM: npm ERR! Failed at the api-webapi-easyapi#0.1.0 build script.
10:33:19 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
10:33:19 PM: npm ERR! A complete log of this run can be found in:
10:33:19 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-06-23T20_33_19_677Z-debug.log
10:33:19 PM: ​
10:33:19 PM: ┌─────────────────────────────┐
10:33:19 PM: │ "build.command" failed │
10:33:19 PM: └─────────────────────────────┘
10:33:19 PM: ​
10:33:19 PM: Error message
10:33:19 PM: Command failed with exit code 1: npm run build
10:33:19 PM: ​
10:33:19 PM: Error location
10:33:19 PM: In Build command from settings:
10:33:19 PM: npm run build
10:33:19 PM: ​
10:33:19 PM: Resolved config
10:33:19 PM: build:
10:33:19 PM: command: npm run build
10:33:19 PM: publish: /opt/build/repo/build
10:33:19 PM: Caching artifacts
10:33:19 PM: Started saving node modules
10:33:19 PM: Finished saving node modules
10:33:19 PM: Started saving build plugins
10:33:19 PM: Finished saving build plugins
10:33:19 PM: Started saving pip cache
10:33:27 PM: Finished saving pip cache
10:33:27 PM: Started saving emacs cask dependencies
10:33:27 PM: Finished saving emacs cask dependencies
10:33:27 PM: Started saving maven dependencies
10:33:27 PM: Finished saving maven dependencies
10:33:27 PM: Started saving boot dependencies
10:33:27 PM: Finished saving boot dependencies
10:33:27 PM: Started saving go dependencies
10:33:27 PM: Finished saving go dependencies
10:33:30 PM: Error running command: Build script returned non-zero exit code: 1
10:33:30 PM: Failing build: Failed to build site
10:33:30 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
10:33:30 PM: Finished processing build request in 1m0.370032766s
It says that there is an import error in the app.js on line 4 but I can't find it. To my eyes, it is as it should be.
import React, { useState } from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom"
import Header from "./components/Header"
import About from "./components/pages/About"
import GetData from "./components/GetData"
import DisplayData from "./components/DisplayData";
import Payload from "./components/Payload"
import "./App.css"
const App = () => {
const [data, setData] = useState({})
const [payload, setPayload] = useState({})
return (
<Router>
<Header/>
<Route exact path="/" render={props => (
<div className="home">
<GetData setData={setData} payload={payload}/>
<div className="main">
<Payload setPayload={setPayload} payload={payload}/>
<DisplayData data={data}/>
</div>
</div>
)}/>
<Route path="/about" component={About}/>
</Router>
)
}
export default App;
The file it points to is just a simple placeholder:
import React from 'react';
const About = () => {
return (
<div>
<h1>About</h1>
</div>
);
};
export default About;
In advance thanks for any help!
Update #1
I found the flaw. An error occurred so GitHub didn't register that the page directory changes name from "Pages" to "pages"

Answer 1

Just eyeballing the log it doesn't seem like there's anything wrong with the code in the file, it's complaining that it can't find the file at all. Exactly why will depend on your build setup, but my first guess is that you either haven't checked components/pages/About in or haven't pushed to your repo since checking it in.
This question suggests you can download a build or (cat a list of files from the build) to investigate that guess.

Answer 2

As i see, you don't have a "pages" directory inside "components" directory
10:33:19 PM: ./src/App.js
10:33:19 PM: Cannot find file './components/pages/About' in './src'.
So you have to change :
import About from "./components/pages/About"
To (depending on what you have in your repo):
import About from "./components/Pages/About"