React App not loading on Netlifly but loading on GitHub pages

Hi Everyone,

I deployed my React app to Netlifly but the page is blank. I was able to successfully deploy to GitHub pages (i.e. content loads) so I’m not sure what the issue is. Lighthouse stated: The page did not paint any content. Please ensure you keep the browser window in the foreground during the load and try again. (NO_FCP)

If anyone can help out I’d appreciate it.

Thanks,

Nick

Link to app:

https://main--statuesque-lamington-8ca6a6.netlify.app/

GitHub repo:

@MogleyBear06 Have you taken your site down since posting this?

I can see in the unfurl of the link that it did see it as a site created with create-react-app, but when visited now it returns the Site Not Found default error.

Hi Nathan!

Sorry for the delay. Thanks for following up. I was able to figure it out and changed the name. Here it is if your interested https://main--nicholasortizportfolio.netlify.app/

Thanks again,

Nick

Hi @MogleyBear06 thanks for sharing the solution with the community!

HI Sam,

No problem! It’s my pleasure. I have another issue I’m facing now so if you could help troubleshoot I’d really appreciate it. For some reason my build is failing whenever I deploy my full stack app to Netlify. I’ve made suggested adjustments but it’s still not working. I’ve successfully deployed two front-end web apps (React) but this is a full stack app. Also, I’m pushing to GitHub which is where Netlify is sourcing the files. Any help would be appreciated!

Link to app: https://riddleriddlechickenliddle.netlify.app/

Thanks!

Nick



Build Log:

4:27:30 PM: build-image version: 310cc3c813338a2ca47a215a1ab6889dc6ff6cb7 (focal)
4:27:30 PM: buildbot version: d59e91ad7b9655bc2253d9308f8d23584a0c6ed8
4:27:30 PM: Fetching cached dependencies
4:27:30 PM: Starting to download cache of 392.3MB
4:27:33 PM: Finished downloading cache in 3.763s
4:27:33 PM: Starting to extract cache
4:27:34 PM: Finished extracting cache in 399ms
4:27:34 PM: Finished fetching cache in 4.226s
4:27:34 PM: Starting to prepare the repo for build
4:27:34 PM: Preparing Git Reference refs/heads/main
4:27:36 PM: Starting to install dependencies
4:27:36 PM: Python version set to 3.8
4:27:36 PM: Attempting Ruby version 2.7.2, read from environment
4:27:37 PM: Using Ruby version 2.7.2
4:27:37 PM: Started restoring cached go cache
4:27:37 PM: Finished restoring cached go cache
4:27:37 PM: go version go1.19.11 linux/amd64
4:27:38 PM: Using PHP version 8.0
4:27:39 PM: v18.16.1 is already installed.
4:27:39 PM: Now using node v18.16.1 (npm v9.5.1)
4:27:39 PM: Enabling Node.js Corepack
4:27:39 PM: Started restoring cached build plugins
4:27:39 PM: Finished restoring cached build plugins
4:27:39 PM: Started restoring cached corepack dependencies
4:27:39 PM: Finished restoring cached corepack dependencies
4:27:39 PM: No npm workspaces detected
4:27:39 PM: Started restoring cached node modules
4:27:39 PM: Finished restoring cached node modules
4:27:39 PM: Installing npm packages using npm version 9.5.1
4:27:46 PM: > bringme@1.0.0 install
4:27:46 PM: > cd server && npm i && cd …/client && npm i
4:27:48 PM: npm WARN deprecated multer@1.4.2: Multer 1.x is affected by CVE-2022-24434. This is fixed in v1.4.4-lts.1 which drops support for versions of Node.js before 6. Please upgrade to at least Node.js 6 and version 1.4.4-lts.1 of Multer. If you need support for older versions of Node.js, we are open to accepting patches that would fix the CVE on the main 1.x release line, whilst maintaining compatibility with Node.js 0.10.
4:27:48 PM: npm WARN deprecated apollo-datasource@3.3.2: The apollo-datasource package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). See Previous versions of Apollo Server - Apollo GraphQL Docs for more details.
4:27:48 PM: npm WARN deprecated apollo-server-plugin-base@3.7.2: The apollo-server-plugin-base package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package’s functionality is now found in the @apollo/server package. See Previous versions of Apollo Server - Apollo GraphQL Docs for more details.
npm WARN deprecated apollo-server-errors@3.3.1: The apollo-server-errors package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package’s functionality is now found in the @apollo/server package. See Previous versions of Apollo Server - Apollo GraphQL Docs for more details.
npm WARN deprecated apollo-server-types@3.8.0: The apollo-server-types package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package’s functionality is now found in the @apollo/server package. See Previous versions of Apollo Server - Apollo GraphQL Docs for more details.
npm WARN deprecated apollo-server-express@3.12.0: The apollo-server-express package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package’s functionality is now found in the @apollo/server package. See Previous versions of Apollo Server - Apollo GraphQL Docs for more details.
npm WARN deprecated node-pre-gyp@0.14.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
4:27:48 PM: npm WARN deprecated apollo-server-env@4.2.1: The apollo-server-env package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package’s functionality is now found in the @apollo/utils.fetcher package. See Previous versions of Apollo Server - Apollo GraphQL Docs for more details.
npm WARN deprecated bcrypt@4.0.1: versions < v5.0.0 do not handle NUL in passwords properly
4:27:48 PM: npm WARN deprecated apollo-reporting-protobuf@3.4.0: The apollo-reporting-protobuf package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package’s functionality is now found in the @apollo/usage-reporting-protobuf package. See Previous versions of Apollo Server - Apollo GraphQL Docs for more details.
npm WARN deprecated @types/bson@4.2.0: This is a stub types definition. bson provides its own type definitions, so you do not need this installed.
4:27:50 PM: npm WARN deprecated apollo-server-core@3.12.0: The apollo-server-core package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023). This package’s functionality is now found in the @apollo/server package. See Previous versions of Apollo Server - Apollo GraphQL Docs for more details.
4:27:50 PM: added 459 packages, and audited 460 packages in 4s
4:27:50 PM: 31 packages are looking for funding
4:27:50 PM: run npm fund for details
4:27:50 PM: 11 vulnerabilities (7 moderate, 4 high)
4:27:50 PM: To address issues that do not require attention, run:
4:27:50 PM: npm audit fix
4:27:50 PM: To address all issues (including breaking changes), run:
4:27:50 PM: npm audit fix --force
4:27:50 PM: Run npm audit for details.
4:27:53 PM: npm WARN deprecated urix@0.1.0: Please see GitHub - lydell/urix: [DEPRECATED] Makes Windows-style paths more unix and URI friendly.
4:27:54 PM: npm WARN deprecated w3c-hr-time@1.0.2: Use your platform’s native performance.now() and performance.timeOrigin.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: Array.prototype.sort() - JavaScript | MDN
4:27:54 PM: npm WARN deprecated source-map-url@0.4.1: See GitHub - lydell/source-map-url: [DEPRECATED] Tools for working with sourceMappingURL comments.
4:27:54 PM: npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
4:27:54 PM: npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
4:27:54 PM: npm WARN deprecated source-map-resolve@0.5.3: See GitHub - lydell/source-map-resolve: [DEPRECATED] Resolve the source map and/or sources for a generated file.
4:27:54 PM: npm WARN deprecated resolve-url@0.2.1: GitHub - lydell/resolve-url: [DEPRECATED] Like Node.js’ `path.resolve`/`url.resolve` for the browser.
4:27:54 PM: npm WARN deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
4:27:55 PM: npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
4:27:56 PM: npm WARN deprecated @types/testing-library__dom@7.5.0: This is a stub types definition. testing-library__dom provides its own type definitions, so you do not need this installed.
4:28:00 PM: added 1388 packages, and audited 1389 packages in 10s
4:28:00 PM: 235 packages are looking for funding
4:28:00 PM: run npm fund for details
4:28:00 PM: 6 high severity vulnerabilities
4:28:00 PM: To address all issues (including breaking changes), run:
4:28:00 PM: npm audit fix --force
4:28:00 PM: Run npm audit for details.
4:28:00 PM: added 60 packages, and audited 61 packages in 20s
4:28:00 PM: 5 packages are looking for funding
4:28:00 PM: run npm fund for details
4:28:00 PM: found 0 vulnerabilities
4:28:00 PM: npm packages installed
4:28:00 PM: Install dependencies script success
4:28:00 PM: Starting build script
4:28:01 PM: Detected 0 framework(s)
4:28:01 PM: Section completed: initializing
4:28:02 PM: ​
4:28:02 PM: Netlify Build
4:28:02 PM: ────────────────────────────────────────────────────────────────
4:28:02 PM: ​
4:28:02 PM: ❯ Version
4:28:02 PM: @netlify/build 29.16.0
4:28:02 PM: ​
4:28:02 PM: ❯ Flags
4:28:02 PM: baseRelDir: true
4:28:02 PM: buildId: 64b460bbe4fdea707b88f0fa
4:28:02 PM: deployId: 64b460bbe4fdea707b88f0fc
4:28:02 PM: ​
4:28:02 PM: ❯ Current directory
4:28:02 PM: /opt/build/repo
4:28:02 PM: ​
4:28:02 PM: ❯ Config file
4:28:02 PM: No config file was defined: using default values.
4:28:02 PM: ​
4:28:02 PM: ❯ Context
4:28:02 PM: production
4:28:03 PM: ​
4:28:03 PM: ❯ Installing plugins
4:28:03 PM: - @netlify/plugin-lighthouse@5.0.0
4:28:13 PM: ​
4:28:13 PM: ❯ Loading plugins
4:28:13 PM: - @netlify/plugin-lighthouse@5.0.0 from Netlify app
4:28:15 PM: ​
4:28:15 PM: Build command from Netlify app
4:28:15 PM: ────────────────────────────────────────────────────────────────
4:28:15 PM: ​
4:28:15 PM: $ npm run build
4:28:15 PM: > bringme@1.0.0 build
4:28:15 PM: > cd client && npm run build
4:28:15 PM: > bringme@0.1.0 build
4:28:15 PM: > react-scripts build
4:28:16 PM: Creating an optimized production build…
4:28:19 PM: One of your dependencies, babel-preset-react-app, is importing the
4:28:19 PM: @babel/plugin-proposal-private-property-in-object package without
4:28:19 PM: declaring it in its dependencies. This is currently working because
4:28:19 PM: @babel/plugin-proposal-private-property-in-object is already in your
4:28:19 PM: node_modules folder for unrelated reasons, but it may break at any time.
4:28:19 PM: babel-preset-react-app is part of the create-react-app project, which
4:28:19 PM: is not maintianed anymore. It is thus unlikely that this bug will
4:28:19 PM: ever be fixed. Add @babel/plugin-proposal-private-property-in-object to
4:28:19 PM: your devDependencies to work around this error. This will make this message
4:28:19 PM: go away.
4:28:27 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2 (Search results for '"non-zero exit code: 2"' - Netlify Support Forums)
4:28:25 PM:
4:28:25 PM: Treating warnings as errors because process.env.CI = true.
4:28:25 PM: Most CI servers set it automatically.
4:28:25 PM:
4:28:25 PM: Failed to compile.
4:28:25 PM:
4:28:25 PM: [eslint]
4:28:25 PM: src/components/Footer/index.js
4:28:25 PM: Line 10:9: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
4:28:25 PM: Line 12:9: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
4:28:25 PM: Line 16:9: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
4:28:25 PM: Line 19:9: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
4:28:25 PM: Line 22:9: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
4:28:25 PM: src/components/GlobalRiddleMenu/index.js
4:28:25 PM: Line 10:13: ‘photoBlob’ is assigned a value but never used no-unused-vars
4:28:25 PM: src/utils/auth.js
4:28:25 PM: Line 45:1: Assign instance to a variable before exporting as module default import/no-anonymous-default-export
4:28:26 PM: ​
4:28:26 PM: build.command failed
4:28:26 PM: ────────────────────────────────────────────────────────────────
4:28:26 PM: ​
4:28:26 PM: Error message
4:28:26 PM: Command failed with exit code 1: npm run build (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
4:28:26 PM: ​
4:28:26 PM: Error location
4:28:26 PM: In Build command from Netlify app:
4:28:26 PM: npm run build
4:28:26 PM: ​
4:28:26 PM: Resolved config
4:28:26 PM: build:
4:28:26 PM: command: npm run build
4:28:26 PM: commandOrigin: ui
4:28:26 PM: environment:
4:28:26 PM: - GOOGLE_APPLICATION_CREDENTIALS
4:28:26 PM: publish: /opt/build/repo/build
4:28:26 PM: publishOrigin: ui
4:28:26 PM: plugins:
4:28:26 PM: - inputs: {}
4:28:26 PM: origin: ui
4:28:26 PM: package: ‘@netlify/plugin-lighthouse’
4:28:26 PM: Caching artifacts
4:28:26 PM: Started saving node modules
4:28:26 PM: Finished saving node modules
4:28:26 PM: Started saving build plugins
4:28:26 PM: Finished saving build plugins
4:28:26 PM: Started saving corepack cache
4:28:26 PM: Finished saving corepack cache
4:28:26 PM: Started saving pip cache
4:28:26 PM: Finished saving pip cache
4:28:26 PM: Started saving emacs cask dependencies
4:28:26 PM: Finished saving emacs cask dependencies
4:28:26 PM: Started saving maven dependencies
4:28:26 PM: Finished saving maven dependencies
4:28:26 PM: Started saving boot dependencies
4:28:26 PM: Finished saving boot dependencies
4:28:26 PM: Started saving rust rustup cache
4:28:26 PM: Finished saving rust rustup cache
4:28:26 PM: Started saving go dependencies
4:28:26 PM: Finished saving go dependencies
4:28:27 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
4:28:27 PM: Failing build: Failed to build site
4:28:28 PM: Finished processing build request in 58.302s

The error is here. Change your build command to CI= npm run build.