CI= npm run build ... doesn't work. React App

Support
,
1

Github Link: React App

Net-Link: https://leafy-cassata-857f33.netlify.app

Hosted on Github, I pull it from Netlify and set the settings to the most common setup.

On separate deployments I have:
I have changed build command to CI= npm run build …
I have added an env variable to also set CI to false.

The site deploys a white screen with a lot of 404’s :

Deploy details

Published deploy for verdant-rolypoly-98314c

Permalink

Today at 8:27 AM

Production: main@HEAD

Open production deployLock to stop auto publishing

Deploy summary

  • All files already uploaded

All files already uploaded by a previous deploy with the same commits.

  • No redirect rules processed

This deploy did not include any redirect rules. Learn more about redirects.

  • No header rules processed

This deploy did not include any header rules. Learn more about headers.

  • All linked resources are secure

Congratulations! No insecure mixed content found in your files.

  • No edge functions deployed

This deploy did not include any edge functions. Learn more about Edge Functions.

  • Build time: 20s. Total deploy time: 23s

Build started at 8:27:21 AM and ended at 8:27:41 AM. Learn more about build minutes.

Deploy log

Preview

8:27:20 AM: build-image version: 4c0c1cadee6a31c9bb8d824514030009c4c05c6a (focal)

8:27:20 AM: build-image tag: v4.15.0

8:27:20 AM: buildbot version: 44377b3b6a4027dd8a09c3df7d29646ce9192423

8:27:21 AM: Fetching cached dependencies

8:27:21 AM: Starting to download cache of 107.3MB

8:27:22 AM: Finished downloading cache in 1.473558428s

8:27:22 AM: Starting to extract cache

8:27:23 AM: Finished extracting cache in 1.120136705s

8:27:23 AM: Finished fetching cache in 2.696942556s

8:27:23 AM: Starting to prepare the repo for build

8:27:23 AM: Preparing Git Reference refs/heads/main

8:27:24 AM: Parsing package.json dependencies

8:27:25 AM: Section completed: initializing

8:27:25 AM: Starting build script

8:27:25 AM: Installing dependencies

8:27:25 AM: Python version set to 2.7

8:27:25 AM: Started restoring cached node version

8:27:26 AM: Finished restoring cached node version

8:27:26 AM: v16.18.1 is already installed.

8:27:26 AM: Now using node v16.18.1 (npm v8.19.2)

8:27:26 AM: Enabling node corepack

8:27:26 AM: Started restoring cached build plugins

8:27:26 AM: Finished restoring cached build plugins

8:27:27 AM: Attempting ruby version 2.7.2, read from environment

8:27:27 AM: Using ruby version 2.7.2

8:27:27 AM: Using PHP version 8.0

8:27:28 AM: No npm workspaces detected

8:27:28 AM: Started restoring cached node modules

8:27:28 AM: Finished restoring cached node modules

8:27:28 AM: Started restoring cached go cache

8:27:28 AM: Finished restoring cached go cache

8:27:29 AM: Installing Go version 1.19.3 (requested 1.19.x)

8:27:34 AM: unset GOOS;

8:27:34 AM: unset GOARCH;

8:27:34 AM: export GOROOT=‘/opt/buildhome/.gimme/versions/go1.19.3.linux.amd64’;

8:27:34 AM: export PATH=“/opt/buildhome/.gimme/versions/go1.19.3.linux.amd64/bin:${PATH}”;

8:27:34 AM: go version >&2;

8:27:34 AM: export GIMME_ENV=“/opt/buildhome/.gimme/env/go1.19.3.linux.amd64.env”

8:27:34 AM: go version go1.19.3 linux/amd64

8:27:34 AM: Detected 1 framework(s)

8:27:34 AM: “create-react-app” at version “5.0.1”

8:27:34 AM: Installing missing commands

8:27:34 AM: Verify run directory

8:27:35 AM: ​

8:27:35 AM: ────────────────────────────────────────────────────────────────

8:27:35 AM: Netlify Build

8:27:35 AM: ────────────────────────────────────────────────────────────────

8:27:35 AM: ​

8:27:35 AM: ❯ Version

8:27:35 AM: @netlify/build 28.4.0

8:27:35 AM: ​

8:27:35 AM: ❯ Flags

8:27:35 AM: baseRelDir: true

8:27:35 AM: buildId: 637e3bd76702f00307533494

8:27:35 AM: deployId: 637e3bd76702f00307533496

8:27:35 AM: ​

8:27:35 AM: ❯ Current directory

8:27:35 AM: /opt/build/repo

8:27:35 AM: ​

8:27:35 AM: ❯ Config file

8:27:35 AM: No config file was defined: using default values.

8:27:35 AM: ​

8:27:35 AM: ❯ Context

8:27:35 AM: production

8:27:35 AM: ​

8:27:35 AM: ────────────────────────────────────────────────────────────────

8:27:35 AM: 1. Build command from Netlify app

8:27:35 AM: ────────────────────────────────────────────────────────────────

8:27:35 AM: ​

8:27:35 AM: $ CI= npm run build

8:27:35 AM: > issue-tracker@0.1.0 build

8:27:35 AM: > react-scripts build

8:27:36 AM: Creating an optimized production build…

8:27:40 AM: Compiled with warnings.

8:27:40 AM:

8:27:40 AM: [eslint]

8:27:40 AM: src/components/AddIssue/AddIssue.js

8:27:40 AM: Line 5:10: ‘addIssue’ is assigned a value but never used no-unused-vars

8:27:40 AM: Line 5:20: ‘setAddIssue’ is assigned a value but never used no-unused-vars

8:27:40 AM: Creating deploy upload records

8:27:40 AM: Search for the keywords to learn more about each warning.

8:27:40 AM: To ignore, add // eslint-disable-next-line to the line before.

8:27:40 AM: File sizes after gzip:

8:27:40 AM: 46.54 kB build/static/js/main.abe2ff8b.js

8:27:40 AM: 1.06 kB build/static/css/main.bc1f2322.css

8:27:41 AM: Starting post processing

8:27:40 AM: The project was built assuming it is hosted at /issue-tracker/.

8:27:40 AM: You can control this with the homepage field in your package.json.

8:27:40 AM: The build folder is ready to be deployed.

8:27:40 AM: Find out more about deployment here:

8:27:41 AM: Post processing - HTML

8:27:40 AM: Deployment | Create React App

8:27:40 AM: ​

8:27:40 AM: (build.command completed in 5.1s)

8:27:41 AM: Post processing - header rules

8:27:40 AM: ​

8:27:40 AM: ────────────────────────────────────────────────────────────────

8:27:40 AM: 2. Deploy site

8:27:40 AM: ────────────────────────────────────────────────────────────────

8:27:41 AM: Post processing - redirect rules

8:27:40 AM: ​

8:27:40 AM: Starting to deploy site from ‘build’

8:27:40 AM: Creating deploy tree

8:27:41 AM: Post processing done

8:27:40 AM: 0 new files to upload

8:27:40 AM: 0 new functions to upload

8:27:41 AM: Section completed: postprocessing

8:27:40 AM: Section completed: deploying

8:27:40 AM: Site deploy was successfully initiated

8:27:40 AM: ​

8:27:40 AM: (Deploy site completed in 199ms)

8:27:40 AM: ​

8:27:40 AM: ────────────────────────────────────────────────────────────────

8:27:40 AM: Netlify Build Complete

8:27:40 AM: ────────────────────────────────────────────────────────────────

8:27:40 AM: ​

8:27:40 AM: (Netlify Build completed in 5.3s)

8:27:41 AM: Caching artifacts

8:27:41 AM: Started saving node modules

8:27:41 AM: Finished saving node modules

8:27:41 AM: Started saving build plugins

8:27:41 AM: Finished saving build plugins

8:27:41 AM: Started saving pip cache

8:27:41 AM: Finished saving pip cache

8:27:41 AM: Started saving emacs cask dependencies

8:27:41 AM: Finished saving emacs cask dependencies

8:27:41 AM: Started saving maven dependencies

8:27:41 AM: Finished saving maven dependencies

8:27:41 AM: Started saving boot dependencies

8:27:41 AM: Finished saving boot dependencies

8:27:41 AM: Started saving rust rustup cache

8:27:41 AM: Finished saving rust rustup cache

8:27:41 AM: Started saving go dependencies

8:27:41 AM: Finished saving go dependencies

8:27:41 AM: Build script success

8:27:41 AM: Section completed: building

8:27:42 AM: Uploading Cache of size 107.1MB

8:27:43 AM: Section completed: cleanup

8:27:43 AM: Finished processing build request in 22.878171017s

8:27:44 AM: Site is live :sparkles:

© 2022 Netlify

2

Hey @ArtisticDevelopment,

The site you’ve mentioned seems to be deleted. If you’re still looking for help, could you share the new site name (if you’ve made a new one)?

3

New Link: https://leafy-cassata-857f33.netlify.app
Original link is also updated

4

Try removing homepage from your package.json.

5

(edit) TO FUTURE READERS: change homepage to “.”

  • No idea why it works but I’m able to deploy to github pages AND netlify now.

It works… Crazy, nuts, WHAT. That was part of the config to have git know the url to push to. But I deleted it, pushed update to repo, AND IT WORKS??? Thank you. I’d love to know what’s happening under the hood here. I will continue to remove “homepage” from my projects that are being pushed to Github pages.

6

If I’m not wrong, GitHub Pages requires that field because of the way it works. But, Netlify doesn’t. When you add a value to homepage, create-react-app will prefix all your assets with that URL. For example, /main.js will become /homepage/main.js. But, the file is actually uploaded as /main.js and thus, when you request /homepage/main.js, it gives a 404.

7

Thank you for that note. When I took out homepage from the package.json and used git to deploy to gh-pages it still properly deployed. My guess is because when initializing the repo we use: git remote add origin [repo url] so the app knows the url without needing the homepage property.
I could be wrong, but that’s my guess. Thank you for your help. It means the world to this entry level dev.

8

Another note. I created a quick React App template. Used git to push/deploy repo with “homepage” included. Success. Immediately deployed to Netlify, success.

Any idea why the template works with “homepage” but not an adjusted app? Curious because if I want it to run on Netlify I have to sacrifice it running on Github.

9

Can’t say much without seeing the site.