Components rendering in localhost but not deploying

Support
, ,
1

I googled my problem and saw many similar posts but could not fix my app.
Like many others, I deployed a React app that worked fine and then one day after an automatic deploy my components stopped rendering on Netlify but they render correctly on localhost. As of now, only my background image is visible.

At first I wasn’t getting any errors and now the console log for the deployed site has a “Failed to load resource: the server responded with a status of 404 ()” error.

I tried building locally and got no errors there.

  • https://jovial-carson-2a1fa0.netlify.app/

  • GitHub - shanicunn/nasa-api

  • Deploy Log:
    1:25:11 AM: Build ready to start
    1:25:13 AM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
    1:25:13 AM: build-image tag: v3.4.1
    1:25:13 AM: buildbot version: 0e3cc7aef5c33f731b54ed4b65d515eaab821679
    1:25:13 AM: Building without cache
    1:25:13 AM: Starting to prepare the repo for build
    1:25:13 AM: No cached dependencies found. Cloning fresh repo
    1:25:13 AM: git clone GitHub - shanicunn/nasa-api
    1:25:15 AM: Preparing Git Reference refs/heads/master
    1:25:16 AM: Starting build script
    1:25:16 AM: Installing dependencies
    1:25:16 AM: Python version set to 2.7
    1:25:17 AM: v12.18.0 is already installed.
    1:25:18 AM: Now using node v12.18.0 (npm v6.14.4)
    1:25:18 AM: Started restoring cached build plugins
    1:25:18 AM: Finished restoring cached build plugins
    1:25:18 AM: Attempting ruby version 2.7.1, read from environment
    1:25:20 AM: Using ruby version 2.7.1
    1:25:20 AM: Using PHP version 5.6
    1:25:20 AM: 5.2 is already installed.
    1:25:20 AM: Using Swift version 5.2
    1:25:20 AM: Started restoring cached node modules
    1:25:20 AM: Finished restoring cached node modules
    1:25:20 AM: Installing NPM modules using NPM version 6.14.4
    1:25:48 AM: > core-js@2.6.11 postinstall /opt/build/repo/node_modules/babel-runtime/node_modules/core-js
    1:25:48 AM: > node -e “try{require(‘./postinstall’)}catch(e){}”
    1:25:49 AM: > core-js@3.6.5 postinstall /opt/build/repo/node_modules/core-js
    1:25:49 AM: > node -e “try{require(‘./postinstall’)}catch(e){}”
    1:25:49 AM: > core-js-pure@3.6.5 postinstall /opt/build/repo/node_modules/core-js-pure
    1:25:49 AM: > node -e “try{require(‘./postinstall’)}catch(e){}”
    1:25:51 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
    1:25:51 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
    1:25:51 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
    1:25:51 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
    1:25:51 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/jest-haste-map/node_modules/fsevents):
    1:25:51 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
    1:25:51 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
    1:25:51 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
    1:25:51 AM: added 1652 packages from 794 contributors and audited 1659 packages in 29.982s
    1:25:53 AM: 63 packages are looking for funding
    1:25:53 AM: run npm fund for details
    1:25:53 AM: found 3 vulnerabilities (1 low, 2 high)
    1:25:53 AM: run npm audit fix to fix them, or npm audit for details
    1:25:53 AM: NPM modules installed
    1:25:53 AM: Started restoring cached go cache
    1:25:53 AM: Finished restoring cached go cache
    1:25:53 AM: go version go1.14.4 linux/amd64
    1:25:53 AM: go version go1.14.4 linux/amd64
    1:25:53 AM: Installing missing commands
    1:25:53 AM: Verify run directory
    1:25:54 AM: ​
    1:25:54 AM: ┌─────────────────────────────┐
    1:25:54 AM: │ Netlify Build │
    1:25:54 AM: └─────────────────────────────┘
    1:25:54 AM: ​
    1:25:54 AM: ❯ Version
    1:25:54 AM: @netlify/build 4.6.3
    1:25:54 AM: ​
    1:25:54 AM: ❯ Flags
    1:25:54 AM: buildbotServerSocket: /tmp/netlify-buildbot-socket
    1:25:54 AM: deployId: 5f780b37d04d18a8bc950999
    1:25:54 AM: mode: buildbot
    1:25:54 AM: ​
    1:25:54 AM: ❯ Current directory
    1:25:54 AM: /opt/build/repo
    1:25:54 AM: ​
    1:25:54 AM: ❯ Config file
    1:25:54 AM: No config file was defined: using default values.
    1:25:54 AM: ​
    1:25:54 AM: ❯ Context
    1:25:54 AM: production
    1:25:55 AM: ​
    1:25:55 AM: ┌───────────────────────────────────┐
    1:25:55 AM: │ 1. Build command from Netlify app │
    1:25:55 AM: └───────────────────────────────────┘
    1:25:55 AM: ​
    1:25:55 AM: $ npm run build
    1:25:55 AM: > nasa-api-project@0.1.0 build /opt/build/repo
    1:25:55 AM: > react-scripts build
    1:25:56 AM: Creating an optimized production build…
    1:26:07 AM: Compiled successfully.
    1:26:07 AM:
    1:26:07 AM: File sizes after gzip:
    1:26:07 AM: 56.44 KB build/static/js/2.3f2b36b3.chunk.js
    1:26:07 AM: 1.92 KB build/static/js/main.e35f21dc.chunk.js
    1:26:07 AM: 1.04 KB build/static/css/main.82c75f0b.chunk.css
    1:26:07 AM: 778 B build/static/js/runtime-main.26d21d86.js
    1:26:07 AM: The project was built assuming it is hosted at ./.
    1:26:07 AM: You can control this with the homepage field in your package.json.
    1:26:07 AM: The build folder is ready to be deployed.
    1:26:07 AM: Find out more about deployment here:
    1:26:07 AM: bit.ly/CRA-deploy
    1:26:08 AM: ​
    1:26:08 AM: (build.command completed in 13s)
    1:26:08 AM: ​
    1:26:08 AM: ┌─────────────────────────────────────────────────────────┐
    1:26:08 AM: │ 2. onPostBuild command from @netlify/plugin-deploy-core │
    1:26:08 AM: └─────────────────────────────────────────────────────────┘
    1:26:08 AM: ​
    1:26:08 AM: Starting to deploy site from ‘build’
    1:26:08 AM: Creating deploy tree
    1:26:08 AM: Creating deploy upload records
    1:26:08 AM: 0 new files to upload
    1:26:08 AM: 0 new functions to upload
    1:26:08 AM: Site deploy was successfully initiated
    1:26:08 AM: ​
    1:26:08 AM: (@netlify/plugin-deploy-core onPostBuild completed in 118ms)
    1:26:08 AM: Starting post processing
    1:26:08 AM: Post processing - HTML
    1:26:08 AM: ​
    1:26:08 AM: ┌─────────────────────────────┐
    1:26:08 AM: │ Netlify Build Complete │
    1:26:08 AM: └─────────────────────────────┘
    1:26:08 AM: ​
    1:26:08 AM: Post processing - header rules
    1:26:08 AM: (Netlify Build completed in 13.5s)
    1:26:08 AM: Post processing - redirect rules
    1:26:08 AM: Caching artifacts
    1:26:08 AM: Started saving node modules
    1:26:08 AM: Post processing done
    1:26:08 AM: Finished saving node modules
    1:26:08 AM: Started saving build plugins
    1:26:08 AM: Finished saving build plugins
    1:26:08 AM: Started saving pip cache
    1:26:08 AM: Site is live
    1:26:08 AM: Finished saving pip cache
    1:26:08 AM: Started saving emacs cask dependencies
    1:26:08 AM: Finished saving emacs cask dependencies
    1:26:08 AM: Started saving maven dependencies
    1:26:08 AM: Finished saving maven dependencies
    1:26:08 AM: Started saving boot dependencies
    1:26:08 AM: Finished saving boot dependencies
    1:26:08 AM: Started saving go dependencies
    1:26:08 AM: Finished saving go dependencies
    1:26:11 AM: Build script success
    1:26:32 AM: Finished processing build request in 1m19.347841284s

  • Package JSON:
    {

    “name”: “nasa-api-project”,

    “version”: “0.1.0”,

    “private”: true,

    “dependencies”: {

    “@testing-library/jest-dom”: “^4.2.4”,

    “@testing-library/react”: “^9.5.0”,

    “@testing-library/user-event”: “^7.2.1”,

    “axios”: “^0.19.2”,

    “dotenv”: “^8.2.0”,

    “react”: “^16.13.1”,

    “react-dom”: “^16.13.1”,

    “react-router-dom”: “^5.2.0”,

    “react-scripts”: “3.4.1”

    },

    “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"

    ]

    }

}

2

Hi @shanicunn and welcome to our community!

Not sure what is going on there, but it seems like a CSS problem potentially? I can see we are loading stuff - both the network requests work, and if I click around with devtools open, I can see your h1, for instance:

image
image1517×1007 669 KB

why that might be different locally, I’m not sure, but a good workflow would be to build locally the way you do, and then the way we do (see GitHub - netlify/build-image: This is the build image used for running automated builds for how to simulate our build environment locally), and see what is different in the build output. At a guess, you don’t sync your netlify tool versions to match your local - this article has more details on that: [Support Guide] Debugging Netlify site builds