Why does 'yarn build' show a blank page when building my react app?
Tags: react, yarn, css, javascript
Published: 2020-04-30 18:01:54

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 (
      <Router basename="/React">
        <div>
  <Route exact path='/' component={home} />
          <Route exact path='/home' component={home} />
          <Route exact path='/about' component={about} />
          <Route exact path='/stats' component={stats} />
          <Route exact path='/faq' component={faq} />
          <Route exact path='/contact' component={contact} />
          <Route exact path='/signup' component={signup} />
          <Route exact path='/login' component={login} />
        </div>
      </Router>
    )
  }
}

export default App;
index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Assistant:400,600,700,800&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      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">
  <link href="%PUBLIC_URL%/custom.css" rel="stylesheet">

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      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`.
    -->
  </body>
</html>



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"
    ]
  }
}