Why does 'yarn build' show a blank page when building my react app?

Ollie Saunderson — Thu, 30 Apr 2020 18:01:54 +0000

I have created a website using create-react-app however when I try to run it using yarn build all I get is a blank white page and this error in the console:

"Failed to load resource: net::ERR_FILE_NOT_FOUND custom.css:1"

I can run it using 'yarn start' and it works perfectly with no errors...

I have tried adding '%PUBLIC_URL%' to the './custom.css' and this hasn't worked, I have also tried adding '"homepage": "."', to the 'package.json' but this hasnt worked, I have also tried to import the CSS directly into my 'App.js':

import React from "react";
import home from "./pages/home"
import about from "./pages/about"
import stats from "./pages/stats"
import contact from "./pages/contact"
import faq from "./pages/faq"
import login from "./pages/Login"
import signup from "./pages/SignUp"
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';

import './custom.css'

class App extends React.Component {
render() {
return (

)
}
}

export default App;
index.html file:

<!DOCTYPE html>

name="description"
content="Web site created using create-react-app"
/>



<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the public folder during the build.
Only files inside the public folder can be referenced from the HTML.

  Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>StatHero</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

You need to enable JavaScript to run this app.

<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

  You can add webfonts, meta tags, or analytics to this file.
  The build step will place the bundled scripts into the <body> tag.

  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
-->

package.json file:

{
"name": "prototypesite",
"homepage": "./",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"babel-eslint": "10.0.1",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.0",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.0.1",
"style": "^0.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

DEV Community: Ollie Saunderson

Why does 'yarn build' show a blank page when building my react app?