Site Live but blank page - Works normally on local env

Hello everyone.

First of all thank you very much for the easy-to-use tool you have created. I am using netlify to deploy my personal react-app portfolio for quite some time now.

Site: https://awesome-roentgen-a0ecc4.netlify.app/
Permalink: https://625d1488e4278f00088ff514--awesome-roentgen-a0ecc4.netlify.app/

Recently, I wanted to create a lambda function that allows me to access a node server which calls the Medium RSS feed which I am later using on my site to showcase articles I’ve written. After following some tutorials I managed to make everything work locally as expected, but I am facing trouble with the deployment.

The build is completed successfully (with some warnings) but I can only access the RSS feed link, since the other pages of my portfolio don’t render. I am pasting below the file structure, netlify.toml file, package.json, as well as the build log. None of the other similar threads have been very helpful so far. Apologies if this is a duplicate.

-----File Structure------
image

-----Netlify.toml---------

[build]
    command = "npm run build"
    functions = "lambda"
    publish = "build/"


[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200
    force = true

--------Package.json---------------

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "axios": "^0.26.1",
    "cors": "^2.8.5",
    "express": "^4.17.3",
    "framer-motion": "^2.9.5",
    "http-proxy-middleware": "^2.0.4",
    "jsdom": "^19.0.0",
    "lazysizes": "^5.2.2",
    "material-ui-icons": "^1.0.0-beta.36",
    "netlify-lambda": "^2.0.15",
    "node-sass": "^4.14.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.1",
    "react-ga": "^3.3.0",
    "react-icons": "^3.11.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-progressive-image": "^0.6.0",
    "react-router-dom": "^5.2.0",
    "react-script-tag": "^1.1.2",
    "react-scripts": "4.0.0",
    "react-swipeable-views": "^0.13.9",
    "rss-parser": "^3.12.0",
    "rss-to-json": "^2.0.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "api:serve": "netlify-lambda serve .netlify/functions",
    "start": "react-scripts start",
    "build": "netlify-lambda build .netlify/functions && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.3%",
      "not ie 11",
      "not dead", 
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      ">0.3%",
      "not ie 11",
      "not dead", 
      "not op_mini all"
    ]
  }
}

10:34:32 AM: Build ready to start
10:34:34 AM: build-image version: ac716c5be7f79fe384a0f3759e8ef612cb821a37 (xenial)
10:34:34 AM: build-image tag: v3.13.0
10:34:34 AM: buildbot version: e552b142336b2b1222a93a4fd4cbed0019c77b46
10:34:34 AM: Fetching cached dependencies
10:34:34 AM: Starting to download cache of 180.0MB
10:34:36 AM: Finished downloading cache in 1.905256469s
10:34:36 AM: Starting to extract cache
10:34:42 AM: Finished extracting cache in 6.670173435s
10:34:43 AM: Finished fetching cache in 8.59928157s
10:34:43 AM: Starting to prepare the repo for build
10:34:43 AM: Preparing Git Reference refs/heads/master
10:34:43 AM: Parsing package.json dependencies
10:34:44 AM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'lambda' versus '' in the Netlify UI
10:34:45 AM: Starting build script
10:34:45 AM: Installing dependencies
10:34:45 AM: Python version set to 2.7
10:34:45 AM: Started restoring cached node version
10:34:47 AM: Finished restoring cached node version
10:34:48 AM: v12.18.0 is already installed.
10:34:48 AM: Now using node v12.18.0 (npm v6.14.4)
10:34:48 AM: Started restoring cached build plugins
10:34:48 AM: Finished restoring cached build plugins
10:34:48 AM: Attempting ruby version 2.7.1, read from environment
10:34:49 AM: Started restoring cached ruby version
10:34:49 AM: Finished restoring cached ruby version
10:34:51 AM: Using ruby version 2.7.1
10:34:51 AM: Using PHP version 5.6
10:34:52 AM: No npm workspaces detected
10:34:52 AM: Started restoring cached node modules
10:34:52 AM: Finished restoring cached node modules
10:34:52 AM: Installing NPM modules using NPM version 6.14.4
10:35:04 AM: npm WARN @material-ui/icons@4.9.1 requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN @material-ui/icons@4.9.1 requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN material-ui-icons@1.0.0-beta.36 requires a peer of material-ui@^1.0.0-beta.16 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN material-ui-icons@1.0.0-beta.36 requires a peer of react@^15.3.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN material-ui-icons@1.0.0-beta.36 requires a peer of react-dom@^15.3.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN react-dom@17.0.1 requires a peer of react@17.0.1 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN react-event-listener@0.6.6 requires a peer of react@^16.3.0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN react-progressive-image@0.6.0 requires a peer of react@^15.0.0-0 || ^16.0.0-0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN react-progressive-image@0.6.0 requires a peer of react-dom@^15.0.0-0 || ^16.0.0-0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN react-script-tag@1.1.2 requires a peer of react@^16.0.0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN react-swipeable-views@0.13.9 requires a peer of react@^15.3.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN recompose@0.26.0 requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
10:35:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
10:35:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
10:35:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
10:35:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
10:35:04 AM: npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/webpack-dev-server/node_modules/fsevents):
10:35:04 AM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
10:35:04 AM: audited 2165 packages in 11.236s
10:35:05 AM: 132 packages are looking for funding
10:35:05 AM:   run `npm fund` for details
10:35:05 AM: found 94 vulnerabilities (3 low, 59 moderate, 17 high, 15 critical)
10:35:05 AM:   run `npm audit fix` to fix them, or `npm audit` for details
10:35:05 AM: NPM modules installed
10:35:05 AM: Started restoring cached go cache
10:35:05 AM: Finished restoring cached go cache
10:35:05 AM: go version go1.14.4 linux/amd64
10:35:05 AM: go version go1.14.4 linux/amd64
10:35:05 AM: Installing missing commands
10:35:05 AM: Verify run directory
10:35:07 AM: ​
10:35:07 AM: ────────────────────────────────────────────────────────────────
10:35:07 AM:   Netlify Build                                                 
10:35:07 AM: ────────────────────────────────────────────────────────────────
10:35:07 AM: ​
10:35:07 AM: ❯ Version
10:35:07 AM:   @netlify/build 26.5.2
10:35:07 AM: ​
10:35:07 AM: ❯ Flags
10:35:07 AM:   baseRelDir: true
10:35:07 AM:   buildId: 625d1488e4278f00088ff512
10:35:07 AM:   deployId: 625d1488e4278f00088ff514
10:35:07 AM: ​
10:35:07 AM: ❯ Current directory
10:35:07 AM:   /opt/build/repo
10:35:07 AM: ​
10:35:07 AM: ❯ Config file
10:35:07 AM:   /opt/build/repo/netlify.toml
10:35:07 AM: ​
10:35:07 AM: ❯ Context
10:35:07 AM:   production
10:35:07 AM: ​
10:35:07 AM: ────────────────────────────────────────────────────────────────
10:35:07 AM:   1. build.command from netlify.toml                            
10:35:07 AM: ────────────────────────────────────────────────────────────────
10:35:07 AM: ​
10:35:07 AM: $ npm run build
10:35:07 AM: > portfolio@0.1.0 build /opt/build/repo
10:35:07 AM: > netlify-lambda build .netlify/functions && react-scripts build
10:35:07 AM: netlify-lambda: Building functions
10:35:08 AM: Hash: bfa78b3574189158b26e
10:35:08 AM: Version: webpack 4.44.2
10:35:08 AM: Time: 675ms
10:35:08 AM: Built at: 04/18/2022 7:35:08 AM
10:35:08 AM:        Asset      Size  Chunks             Chunk Names
10:35:08 AM: posts-get.js  38.1 KiB       0  [emitted]  posts-get
10:35:08 AM: Entrypoint posts-get = posts-get.js
10:35:08 AM:  [0] /opt/build/repo/node_modules/axios/lib/utils.js 8.65 KiB {0} [built]
10:35:08 AM:  [1] /opt/build/repo/node_modules/axios/lib/cancel/Cancel.js 385 bytes {0} [built]
10:35:08 AM:  [2] /opt/build/repo/node_modules/axios/lib/helpers/buildURL.js 1.61 KiB {0} [built]
10:35:08 AM:  [3] /opt/build/repo/node_modules/axios/lib/defaults/index.js 3.48 KiB {0} [built]
10:35:08 AM:  [7] /opt/build/repo/node_modules/axios/lib/env/data.js 43 bytes {0} [built]
10:35:08 AM:  [8] /opt/build/repo/node_modules/axios/lib/helpers/bind.js 256 bytes {0} [built]
10:35:08 AM: [16] /opt/build/repo/node_modules/axios/lib/cancel/isCancel.js 102 bytes {0} [built]
10:35:08 AM: [17] /opt/build/repo/node_modules/axios/lib/core/mergeConfig.js 3.12 KiB {0} [built]
10:35:08 AM: [18] ./posts-get.js 993 bytes {0} [built]
10:35:08 AM: [19] /opt/build/repo/node_modules/axios/index.js 40 bytes {0} [built]
10:35:08 AM: [20] /opt/build/repo/node_modules/axios/lib/axios.js 1.52 KiB {0} [built]
10:35:08 AM: [21] /opt/build/repo/node_modules/axios/lib/core/Axios.js 4.14 KiB {0} [built]
10:35:08 AM: [47] /opt/build/repo/node_modules/axios/lib/cancel/CancelToken.js 2.41 KiB {0} [built]
10:35:08 AM: [48] /opt/build/repo/node_modules/axios/lib/helpers/spread.js 564 bytes {0} [built]
10:35:08 AM: [49] /opt/build/repo/node_modules/axios/lib/helpers/isAxiosError.js 373 bytes {0} [built]
10:35:08 AM:     + 35 hidden modules
10:35:11 AM: Creating an optimized production build...
10:35:13 AM: Browserslist: caniuse-lite is outdated. Please run:
10:35:13 AM:   npx browserslist@latest --update-db
10:35:13 AM:   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
10:36:22 AM: Compiled successfully.
10:36:22 AM: 
10:36:22 AM: File sizes after gzip:
10:36:22 AM:   927.73 KB  build/static/js/2.e5cefca5.chunk.js
10:36:22 AM:   6.31 KB    build/static/js/main.6bfd24f7.chunk.js
10:36:22 AM:   1.39 KB    build/static/js/3.977e740c.chunk.js
10:36:22 AM:   1.17 KB    build/static/js/runtime-main.2638e4a7.js
10:36:22 AM:   680 B      build/static/css/main.865152f6.chunk.css
10:36:22 AM: The project was built assuming it is hosted at ./.
10:36:22 AM: You can control this with the homepage field in your package.json.
10:36:22 AM: The build folder is ready to be deployed.
10:36:22 AM: Find out more about deployment here:
10:36:22 AM:   https://cra.link/deployment
10:36:23 AM: ​
10:36:23 AM: (build.command completed in 1m 15.9s)
10:36:23 AM: ​
10:36:23 AM: ────────────────────────────────────────────────────────────────
10:36:23 AM:   2. Functions bundling                                         
10:36:23 AM: ────────────────────────────────────────────────────────────────
10:36:23 AM: ​
10:36:23 AM: Packaging Functions from lambda directory:
10:36:23 AM:  - posts-get.js
10:36:23 AM: ​
10:36:23 AM: ​
10:36:23 AM: (Functions bundling completed in 696ms)
10:36:23 AM: ​
10:36:23 AM: ────────────────────────────────────────────────────────────────
10:36:23 AM:   3. Deploy site                                                
10:36:23 AM: Creating deploy upload records
10:36:23 AM: ────────────────────────────────────────────────────────────────
10:36:23 AM: ​
10:36:23 AM: Starting to deploy site from 'build'
10:36:23 AM: Creating deploy tree 
10:36:24 AM: 6 new files to upload
10:36:24 AM: 0 new functions to upload
10:36:24 AM: Site deploy was successfully initiated
10:36:24 AM: ​
10:36:24 AM: (Deploy site completed in 973ms)
10:36:24 AM: ​
10:36:24 AM: ────────────────────────────────────────────────────────────────
10:36:24 AM: Starting post processing
10:36:24 AM:   Netlify Build Complete                                        
10:36:24 AM: ────────────────────────────────────────────────────────────────
10:36:24 AM: ​
10:36:24 AM: (Netlify Build completed in 1m 17.7s)
10:36:24 AM: Post processing - HTML
10:36:25 AM: Caching artifacts
10:36:25 AM: Started saving node modules
10:36:25 AM: Finished saving node modules
10:36:25 AM: Started saving build plugins
10:36:25 AM: Finished saving build plugins
10:36:25 AM: Started saving pip cache
10:36:25 AM: Finished saving pip cache
10:36:25 AM: Started saving emacs cask dependencies
10:36:25 AM: Post processing - header rules
10:36:25 AM: Finished saving emacs cask dependencies
10:36:25 AM: Started saving maven dependencies
10:36:25 AM: Finished saving maven dependencies
10:36:25 AM: Started saving boot dependencies
10:36:25 AM: Post processing - redirect rules
10:36:25 AM: Finished saving boot dependencies
10:36:25 AM: Started saving rust rustup cache
10:36:25 AM: Finished saving rust rustup cache
10:36:25 AM: Started saving go dependencies
10:36:25 AM: Post processing done
10:36:25 AM: Finished saving go dependencies
10:36:25 AM: Build script success
10:36:29 AM: Site is live ✨
10:36:55 AM: Finished processing build request in 2m21.338275144s

I hope the info above are helpful

Hello everyone!

I managed to solve the issue. It was unrelated to netlify’s build configuration after all. I was using a package (jsdom) which for some reason didn’t allow the site to render on production.

After uninstalling it, the site worked perfectly, albeit without the medium images which I was fetching using jsdom :confused:

1 Like

Hey there, @GeorgeKoureas :wave:

Thanks so much for coming back and sharing your solution with the Forums. Glad everything is working for you now. Happy building :rocket: