0

I am trying to deploy a React app to Netlify. The app works locally. The deploy succeeds with no errors but when I preview the site (shown below), the <App> component is not inserted into the #root div inside index.html. The h1 in #root, which is in place of a loading animation, is never replaced. Below is a screenshot of the website preview, the relevant code, and a deploy log:

enter image description here

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="../src/index.css" />
  </head>
  <body>
    <div id="root"><h1>Loading...</h1></div>
  </body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { CartProvider } from "./context/CartContext";
import { ProductsProvider } from "./context/ProductsContext";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <ProductsProvider>
      <CartProvider>
        <App />
      </CartProvider>
    </ProductsProvider>
  </BrowserRouter>
);

Netlify Deploy Log

11:02:11 AM: Build ready to start
11:02:12 AM: build-image version: d7b3dbfb0846505993c9a131894d1858074c90b4 (focal)
11:02:12 AM: build-image tag: v4.10.1
11:02:12 AM: buildbot version: f50214a1de5f04db9b59dcaff80e969673c77548
11:02:13 AM: Fetching cached dependencies
11:02:13 AM: Starting to download cache of 145.5MB
11:02:14 AM: Finished downloading cache in 1.455419529s
11:02:14 AM: Starting to extract cache
11:02:16 AM: Finished extracting cache in 2.366993346s
11:02:16 AM: Finished fetching cache in 3.87309758s
11:02:16 AM: Starting to prepare the repo for build
11:02:17 AM: Preparing Git Reference refs/heads/main
11:02:17 AM: Parsing package.json dependencies
11:02:18 AM: Different build dir detected, going to use the one specified in the Netlify configuration file: '' versus '/' in the Netlify UI
11:02:18 AM: Starting build script
11:02:18 AM: Installing dependencies
11:02:18 AM: Python version set to 2.7
11:02:18 AM: Started restoring cached node version
11:02:18 AM: Finished restoring cached node version
11:02:19 AM: v16.16.0 is already installed.
11:02:19 AM: Now using node v16.16.0 (npm v8.11.0)
11:02:19 AM: Started restoring cached build plugins
11:02:19 AM: Finished restoring cached build plugins
11:02:19 AM: Attempting ruby version 2.7.2, read from environment
11:02:20 AM: Using ruby version 2.7.2
11:02:20 AM: Using PHP version 8.0
11:02:20 AM: No npm workspaces detected
11:02:20 AM: Started restoring cached node modules
11:02:20 AM: Finished restoring cached node modules
11:02:21 AM: Started restoring cached go cache
11:02:21 AM: Finished restoring cached go cache
11:02:21 AM: Installing Go version 1.17 (requested 1.17)
11:02:25 AM: unset GOOS;
11:02:25 AM: unset GOARCH;
11:02:25 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.17.linux.amd64';
11:02:25 AM: export PATH="/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}";
11:02:25 AM: go version >&2;
11:02:25 AM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.17.linux.amd64.env"
11:02:25 AM: go version go1.17 linux/amd64
11:02:25 AM: Installing missing commands
11:02:25 AM: Verify run directory
11:02:26 AM: ​
11:02:26 AM: ────────────────────────────────────────────────────────────────
11:02:26 AM:   Netlify Build                                                 
11:02:26 AM: ────────────────────────────────────────────────────────────────
11:02:26 AM: ​
11:02:26 AM: ❯ Version
11:02:26 AM:   @netlify/build 27.8.1
11:02:26 AM: ​
11:02:26 AM: ❯ Flags
11:02:26 AM:   baseRelDir: true
11:02:26 AM:   buildId: 62e81523d81f4d00097df9fa
11:02:26 AM:   deployId: 62e81523d81f4d00097df9fc
11:02:26 AM: ​
11:02:26 AM: ❯ Current directory
11:02:26 AM:   /opt/build/repo
11:02:26 AM: ​
11:02:26 AM: ❯ Config file
11:02:26 AM:   No config file was defined: using default values.
11:02:26 AM: ​
11:02:26 AM: ❯ Context
11:02:26 AM:   production
11:02:26 AM: ​
11:02:26 AM: ────────────────────────────────────────────────────────────────
11:02:26 AM:   1. Build command from Netlify app                             
11:02:26 AM: ────────────────────────────────────────────────────────────────
11:02:26 AM: ​
11:02:26 AM: $ npm run build
11:02:26 AM: > hello-world-website@0.1.0 build
11:02:26 AM: > react-scripts build
11:02:27 AM: Creating an optimized production build...
11:02:37 AM: Compiled successfully.
11:02:37 AM: 
11:02:37 AM: File sizes after gzip:
11:02:37 AM:   59.22 kB  build/static/js/main.27bdc489.js
11:02:37 AM:   2.87 kB   build/static/css/main.00d780d9.css
11:02:37 AM: The project was built assuming it is hosted at /.
11:02:37 AM: You can control this with the homepage field in your package.json.
11:02:37 AM: The build folder is ready to be deployed.
11:02:37 AM: You may serve it with a static server:
11:02:37 AM:   npm install -g serve
11:02:37 AM:   serve -s build
11:02:37 AM: Find out more about deployment here:
11:02:37 AM:   https://cra.link/deployment
11:02:37 AM: ​
11:02:37 AM: (build.command completed in 11.1s)
11:02:37 AM: ​
11:02:37 AM: ────────────────────────────────────────────────────────────────
11:02:37 AM:   2. Deploy site                                                
11:02:37 AM: ────────────────────────────────────────────────────────────────
11:02:37 AM: ​
11:02:37 AM: Starting to deploy site from 'build'
11:02:37 AM: Creating deploy tree 
11:02:37 AM: Creating deploy upload records
11:02:37 AM: 0 new files to upload
11:02:37 AM: 0 new functions to upload
11:02:37 AM: Site deploy was successfully initiated
11:02:37 AM: ​
11:02:37 AM: (Deploy site completed in 187ms)
11:02:37 AM: ​
11:02:37 AM: ────────────────────────────────────────────────────────────────
11:02:37 AM:   Netlify Build Complete                                        
11:02:37 AM: ────────────────────────────────────────────────────────────────
11:02:37 AM: ​
11:02:37 AM: (Netlify Build completed in 11.3s)
11:02:37 AM: Starting post processing
11:02:37 AM: Post processing - HTML
11:02:38 AM: Caching artifacts
11:02:38 AM: Started saving node modules
11:02:38 AM: Post processing - header rules
11:02:38 AM: Finished saving node modules
11:02:38 AM: Started saving build plugins
11:02:38 AM: Finished saving build plugins
11:02:38 AM: Started saving pip cache
11:02:38 AM: Finished saving pip cache
11:02:38 AM: Started saving emacs cask dependencies
11:02:38 AM: Finished saving emacs cask dependencies
11:02:38 AM: Started saving maven dependencies
11:02:38 AM: Finished saving maven dependencies
11:02:38 AM: Started saving boot dependencies
11:02:38 AM: Finished saving boot dependencies
11:02:38 AM: Started saving rust rustup cache
11:02:38 AM: Finished saving rust rustup cache
11:02:38 AM: Started saving go dependencies
11:02:38 AM: Finished saving go dependencies
11:02:38 AM: Build script success
11:02:38 AM: Post processing - redirect rules
11:02:38 AM: Post processing done
11:02:39 AM: Uploading Cache of size 145.6MB
11:02:41 AM: Site is live ✨
11:02:41 AM: Finished processing build request in 28.896927814s
JBrown
  • 825
  • 6
  • 22

1 Answers1

0

in your public folder add a file named _redirects, inside that file the contents should be

/* /index.html 200

This is necessary to use react-router and is most likely why nothing is being displayed.

Huckleberry Ginesta
  • 11
  • 2