My react application is not showing up

[aniddh17]

Hey guys, I am working for last 10 hours to build a portfolio website using react.js and three.js. The site is working fine in my local build ( build command - ‘npm run build’). But as I try to deploy it on netlify, there comes an error “PAGE NOT FOUND - Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.”
I have tried both methods, first by git repo and now manually deploying my dist folder but both times getting the same error.

Here’s my sub-domain: https://spontaneous-pie-ee5420.netlify.app
In case you need my git repo: GitHub - aniruddhdadhich/portfolio-site

[SamO]

Hi welcome to the forums i’m glad you found us. I recommend you take a look at this guide.

[Support Guide] I’ve deployed my site but I still see "Page not found”

Last reviewed by Netlify Support - August, 2023 Netlify attempts to lookup a file based on several xor filters, and when all of these fail, we end up serving a 404 page. For example, a request made to /example/ would check /example/index.html, /example.html, /example/home.html and several other combinations (not necessarily in the same order) before hitting the 404. However, in case you were not expecting a 404 at a particular URL, you might be interested in finding out the reason and potentia…

[aniddh17]

Hello Sam, Thanks for responding. I’ve checked the deployed files, and indeed there is no index.html file there. I don’t understand when I uploaded the files, the index.html file was there but not in deployed file. Can you show me how to proceed, 'cause the link you shared doesn’t talk much about how to deal with it or maybe I can’t find it.

[jasiqli]

I cloned your repository @aniddh17 and manually deployed the dist directory. The site works correctly as shown here: quiet-cactus-cdcd75.netlify.app

Can you share the settings used when deploying from GitHub?

[aniddh17]

I don’t understand how it worked with your build. I’ll tell you the whole process I did undergo while deploying.

First I tried to deploy through continuous github deployment. I connected the netlify with github repo and then in the build settings I didn’t provide base directory as it’s by default set to root, the build command was ‘npm run build’ and the publish directory was ‘dist’. It didn’t work. The logs are as following:

10:19:26 PM: build-image version: 099264affa13d33ffbaea4ccf963ddbead423c30 (focal)
10:19:26 PM: buildbot version: 099264affa13d33ffbaea4ccf963ddbead423c30
10:19:26 PM: Fetching cached dependencies
10:19:26 PM: Failed to fetch cache, continuing with build
10:19:26 PM: Starting to prepare the repo for build
10:19:26 PM: No cached dependencies found. Cloning fresh repo
10:19:26 PM: git clone --filter=blob:none GitHub - aniruddhdadhich/portfolio-site
10:19:26 PM: Preparing Git Reference refs/heads/master
10:19:27 PM: Parsing package.json dependencies
10:19:29 PM: Starting to install dependencies
10:19:29 PM: v16.19.1 is already installed.
10:19:29 PM: Now using node v16.19.1 (npm v8.19.3)
10:19:29 PM: Enabling Node.js Corepack
10:19:30 PM: Started restoring cached build plugins
10:19:30 PM: Finished restoring cached build plugins
10:19:30 PM: Started restoring cached corepack dependencies
10:19:30 PM: Finished restoring cached corepack dependencies
10:19:30 PM: No npm workspaces detected
10:19:30 PM: Started restoring cached node modules
10:19:30 PM: Finished restoring cached node modules
10:19:30 PM: Installing npm packages using npm version 8.19.3
10:19:30 PM: npm ERR! code ERESOLVE
10:19:30 PM: npm ERR! ERESOLVE could not resolve
10:19:30 PM: npm ERR!
10:19:30 PM: npm ERR! While resolving: react-route@1.0.3
10:19:30 PM: npm ERR! Found: react@18.2.0
10:19:31 PM: Failed during stage ‘Install dependencies’: dependency_installation script returned non-zero exit code: 1
10:19:30 PM: npm ERR! node_modules/react
10:19:30 PM: npm ERR! react@“^18.2.0” from the root project
10:19:30 PM: npm ERR! peer react@“^16.8.0 || ^17.0.0 || ^18.0.0” from @react-spring/animated@9.6.1
10:19:30 PM: npm ERR! node_modules/@react-spring/animated
10:19:30 PM: npm ERR! @react-spring/animated@“~9.6.1” from @react-spring/core@9.6.1
10:19:30 PM: npm ERR! node_modules/@react-spring/core
10:19:30 PM: npm ERR! @react-spring/core@“~9.6.1” from @react-spring/three@9.6.1
10:19:30 PM: npm ERR! node_modules/@react-spring/three
10:19:30 PM: npm ERR! @react-spring/three@“~9.6.1” from @react-three/drei@9.57.3
10:19:30 PM: npm ERR! node_modules/@react-three/drei
10:19:30 PM: npm ERR! @react-spring/animated@“~9.6.1” from @react-spring/three@9.6.1
10:19:30 PM: npm ERR! node_modules/@react-spring/three
10:19:30 PM: npm ERR! @react-spring/three@“~9.6.1” from @react-three/drei@9.57.3
10:19:30 PM: npm ERR! node_modules/@react-three/drei
10:19:30 PM: npm ERR! @react-three/drei@“^9.57.3” from the root project
10:19:30 PM: npm ERR! 17 more (@react-spring/core, @react-spring/shared, …)
10:19:30 PM: npm ERR!
10:19:30 PM: npm ERR! Could not resolve dependency:
10:19:30 PM: npm ERR! peer react@“^0.13.3 || ^0.14.0-rc1” from react-route@1.0.3
10:19:30 PM: npm ERR! node_modules/react-route
10:19:30 PM: npm ERR! react-route@“^1.0.3” from the root project
10:19:30 PM: npm ERR!
10:19:30 PM: npm ERR! Conflicting peer dependency: react@0.14.10
10:19:30 PM: npm ERR! node_modules/react
10:19:30 PM: npm ERR! peer react@“^0.13.3 || ^0.14.0-rc1” from react-route@1.0.3
10:19:30 PM: npm ERR! node_modules/react-route
10:19:30 PM: npm ERR! react-route@“^1.0.3” from the root project
10:19:30 PM: npm ERR!
10:19:30 PM: npm ERR! Fix the upstream dependency conflict, or retry
10:19:30 PM: npm ERR! this command with --force, or --legacy-peer-deps
10:19:30 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
10:19:30 PM: npm ERR!
10:19:30 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
10:19:30 PM: npm ERR! A complete log of this run can be found in:
10:19:30 PM: npm ERR! /opt/buildhome/.npm/_logs/2023-03-23T16_49_30_459Z-debug-0.log
10:19:30 PM: Error during npm install
10:19:30 PM: Build was terminated: dependency_installation script returned non-zero exit code: 1
10:19:31 PM: Failing build: Failed to install dependencies
10:19:31 PM: Finished processing build request in 4.856s

Then I tried manual deployment from my system but it also showed same error: 404 page not found

[jasiqli]

For the manual deploy:

When you did a manual deploy, what directory did you upload? I uploaded the dist directory.

For deploy from git

The error (which I received on my load machine also)

@aniddh17

npm ERR! code ERESOLVE

means you have conflicting packages.

The solution is in the logs (which I used when installing packages locally too)

@aniddh17

10:19:30 PM: npm ERR! Fix the upstream dependency conflict, or retry
10:19:30 PM: npm ERR! this command with --force, or --legacy-peer-deps

This post provides future explanation

Deploy failed today: Build was terminated: Build script returned non-zero exit code: 1

The error is a peer dependency conflict relating to versions of react, which provides guidance on how you can attempt to resolve it: 11:06:39 AM: npm ERR! Fix the upstream dependency conflict, or retry 11:06:39 AM: npm ERR! this command with --force, or --legacy-peer-deps 11:06:39 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution. It suggests you can run npm install --force or npm install --legacy-peer-deps. To do this on Netlify you can use the NPM_FLAGS envi…

[aniddh17]

I’m sorry for late reply. This solution worked. Thanks a lot.

[SamO]

Thanks for confirming you found your solution!