Home
Support Forums

Blank page after deployment

My domain is live, but it isn’t displaying my menu page, while others are displaying. All pages are showing locally and even on codesandbox. Here’s a link to my domain https://icecream-order.netlify.app/

below is my deploy log

1:20:25 PM: Build ready to start
1:20:27 PM: build-image version: 081db65c3e4ce8423fedb40e7689a87de6f84667
1:20:27 PM: build-image tag: v4.3.1
1:20:27 PM: buildbot version: cd472ed83588da774a80e84962d870b803c1ae34
1:20:27 PM: Fetching cached dependencies
1:20:27 PM: Starting to download cache of 157.3MB
1:20:28 PM: Finished downloading cache in 1.246628532s
1:20:28 PM: Starting to extract cache
1:20:34 PM: Finished extracting cache in 5.795474862s
1:20:34 PM: Finished fetching cache in 7.089366893s
1:20:34 PM: Starting to prepare the repo for build
1:20:35 PM: Preparing Git Reference refs/heads/master
1:20:35 PM: Parsing package.json dependencies
1:20:36 PM: Starting build script
1:20:36 PM: Installing dependencies
1:20:36 PM: Python version set to 2.7
1:20:36 PM: Started restoring cached node version
1:20:39 PM: Finished restoring cached node version
1:20:39 PM: v16.9.1 is already installed.
1:20:39 PM: Now using node v16.9.1 (npm v7.21.1)
1:20:40 PM: Started restoring cached build plugins
1:20:40 PM: Finished restoring cached build plugins
1:20:40 PM: Attempting ruby version 2.7.2, read from environment
1:20:41 PM: Using ruby version 2.7.2
1:20:41 PM: Using PHP version 8.0
1:20:41 PM: Started restoring cached node modules
1:20:41 PM: Finished restoring cached node modules
1:20:42 PM: Started restoring cached go cache
1:20:42 PM: Finished restoring cached go cache
1:20:42 PM: go version go1.16.5 linux/amd64
1:20:42 PM: go version go1.16.5 linux/amd64
1:20:42 PM: Installing missing commands
1:20:42 PM: Verify run directory
1:20:43 PM: ​
1:20:43 PM: ────────────────────────────────────────────────────────────────
1:20:43 PM: Netlify Build
1:20:43 PM: ────────────────────────────────────────────────────────────────
1:20:43 PM: ​
1:20:43 PM: ❯ Version
1:20:43 PM: @netlify/build 18.10.0
1:20:43 PM: ​
1:20:43 PM: ❯ Flags
1:20:43 PM: baseRelDir: true
1:20:43 PM: buildId: 61448809ab10e3000858c166
1:20:43 PM: deployId: 61448809ab10e3000858c168
1:20:43 PM: ​
1:20:43 PM: ❯ Current directory
1:20:43 PM: /opt/build/repo
1:20:43 PM: ​
1:20:43 PM: ❯ Config file
1:20:43 PM: No config file was defined: using default values.
1:20:43 PM: ​
1:20:43 PM: ❯ Context
1:20:43 PM: production
1:20:43 PM: ​
1:20:43 PM: ────────────────────────────────────────────────────────────────
1:20:43 PM: 1. Build command from Netlify app
1:20:43 PM: ────────────────────────────────────────────────────────────────
1:20:43 PM: ​
1:20:43 PM: $ CI= npm run build
1:20:44 PM: > coldstone-order-app@0.1.0 build
1:20:44 PM: > react-scripts build
1:20:46 PM: Creating an optimized production build…
1:20:55 PM: Compiled with warnings.
1:20:55 PM:
1:20:55 PM: src/App.jsx
1:20:55 PM: Line 1:17: ‘useContext’ is defined but never used no-unused-vars
1:20:55 PM: Line 4:10: ‘ColdstoneContext’ is defined but never used no-unused-vars
1:20:55 PM: src/components/cart/Cart.jsx
1:20:55 PM: Line 2:10: ‘useContext’ is defined but never used no-unused-vars
1:20:55 PM: Line 7:10: ‘usePaystackPayment’ is defined but never used no-unused-vars
1:20:55 PM: Line 11:13: ‘items’ is assigned a value but never used no-unused-vars
1:20:55 PM: Line 12:12: ‘price’ is assigned a value but never used no-unused-vars
1:20:55 PM: Line 12:19: ‘quantity’ is assigned a value but never used no-unused-vars
1:20:55 PM: Line 18:26: ‘setPaystackHook’ is assigned a value but never used no-unused-vars
1:20:55 PM: src/components/info/Info.jsx
1:20:55 PM: Line 1:16: ‘useState’ is defined but never used no-unused-vars
1:20:55 PM: Line 17:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
1:20:55 PM: Line 42:9: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
1:20:55 PM: Line 43:9: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
1:20:55 PM: Line 44:9: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
1:20:55 PM: Line 52:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
1:20:55 PM: src/components/menuItems/MenuItems.jsx
1:20:55 PM: Line 4:20: ‘useRef’ is defined but never used no-unused-vars
1:20:55 PM: Line 4:28: ‘useEffect’ is defined but never used no-unused-vars
1:20:55 PM: Line 6:26: ‘Router’ is defined but never used no-unused-vars
1:20:55 PM: Line 6:34: ‘Switch’ is defined but never used no-unused-vars
1:20:55 PM: Line 6:42: ‘Route’ is defined but never used no-unused-vars
1:20:55 PM: Line 6:49: ‘Link’ is defined but never used no-unused-vars
1:20:55 PM: Line 6:55: ‘useParams’ is defined but never used no-unused-vars
1:20:55 PM: Line 6:66: ‘useRouteMatch’ is defined but never used no-unused-vars
1:20:55 PM: Line 15:11: ‘history’ is assigned a value but never used no-unused-vars
1:20:55 PM: Line 96:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
1:20:55 PM: src/components/navbar/Navbar.jsx
1:20:55 PM: Line 3:9: ‘Link’ is defined but never used no-unused-vars
1:20:55 PM: src/context/context.js
1:20:55 PM: Creating deploy upload records
1:20:55 PM: Line 7:7: ‘itemArray’ is assigned a value but never used no-unused-vars
1:20:55 PM: Line 72:12: React Hook useEffect has a missing dependency: ‘getCartProducts’. Either include it or remove the dependency array react-hooks/exhaustive-deps
1:20:55 PM: src/index.js
1:20:55 PM: Line 6:10: ‘transitions’ is defined but never used no-unused-vars
1:20:55 PM: Line 6:23: ‘positions’ is defined but never used no-unused-vars
1:20:55 PM: src/pages/home/Home.jsx
1:20:55 PM: Line 2:8: ‘styles’ is defined but never used no-unused-vars
1:20:55 PM: src/pages/login/Login.jsx
1:20:55 PM: Line 7:27: ‘useLocation’ is defined but never used no-unused-vars
1:20:55 PM: Line 38:11: ‘handleFacebookLogin’ is assigned a value but never used no-unused-vars
1:20:55 PM: src/pages/menu/Menu.jsx
1:20:55 PM: Line 6:10: ‘ColdstoneContext’ is defined but never used no-unused-vars
1:20:55 PM: Line 7:9: ‘Route’ is defined but never used no-unused-vars
1:20:55 PM: Line 7:16: ‘Redirect’ is defined but never used no-unused-vars
1:20:55 PM: Search for the keywords to learn more about each warning.
1:20:55 PM: To ignore, add // eslint-disable-next-line to the line before.
1:20:55 PM: File sizes after gzip:
1:20:55 PM: 62.15 KB build/static/js/2.76422c59.chunk.js
1:20:55 PM: 5.4 KB build/static/js/main.31333222.chunk.js
1:20:55 PM: 3.47 KB build/static/css/main.fc00a50f.chunk.css
1:20:55 PM: 1.63 KB build/static/js/3.3c240bfb.chunk.js
1:20:55 PM: 1.17 KB build/static/js/runtime-main.a8f09e91.js
1:20:55 PM: The project was built assuming it is hosted at ./.
1:20:55 PM: You can control this with the homepage field in your package.json.
1:20:55 PM: The build folder is ready to be deployed.
1:20:55 PM: Find out more about deployment here:
1:20:55 PM: Deployment | Create React App
1:20:55 PM: ​
1:20:55 PM: (build.command completed in 11.3s)
1:20:55 PM: ​
1:20:55 PM: ────────────────────────────────────────────────────────────────
1:20:55 PM: 2. Deploy site
1:20:55 PM: ────────────────────────────────────────────────────────────────
1:20:55 PM: ​
1:20:55 PM: Starting to deploy site from ‘build’
1:20:55 PM: Creating deploy tree
1:20:55 PM: 4 new files to upload
1:20:55 PM: 0 new functions to upload
1:20:55 PM: Site deploy was successfully initiated
1:20:55 PM: ​
1:20:55 PM: (Deploy site completed in 418ms)
1:20:55 PM: ​
1:20:55 PM: ────────────────────────────────────────────────────────────────
1:20:55 PM: Netlify Build Complete
1:20:55 PM: ────────────────────────────────────────────────────────────────
1:20:55 PM: ​
1:20:55 PM: (Netlify Build completed in 11.8s)
1:20:55 PM: Starting post processing
1:20:55 PM: Post processing - HTML
1:20:55 PM: Post processing - header rules
1:20:56 PM: Post processing - redirect rules
1:20:56 PM: Caching artifacts
1:20:56 PM: Started saving node modules
1:20:56 PM: Finished saving node modules
1:20:56 PM: Started saving build plugins
1:20:56 PM: Finished saving build plugins
1:20:56 PM: Started saving pip cache
1:20:56 PM: Post processing done
1:20:56 PM: Finished saving pip cache
1:20:56 PM: Started saving emacs cask dependencies
1:20:56 PM: Finished saving emacs cask dependencies
1:20:56 PM: Started saving maven dependencies
1:20:56 PM: Finished saving maven dependencies
1:20:56 PM: Started saving boot dependencies
1:20:56 PM: Finished saving boot dependencies
1:20:56 PM: Started saving rust rustup cache
1:20:56 PM: Finished saving rust rustup cache
1:20:56 PM: Started saving go dependencies
1:20:56 PM: Finished saving go dependencies
1:20:56 PM: Site is live :sparkles:
1:20:56 PM: Build script success
1:21:24 PM: Finished processing build request in 56.499812011s

Hi @OlaoyeVic

I’m not seeing a blank page. You managed to solve the issue?

I don’t mean the whole site. The “menu” page isn’t displaying anything, kindly help look into it

Apologies, missed the bit about the menu page.

Suggest looking at the errors in DevTools for some clues. CORS issue seems the main cause which in turn causes the React script to fail.

I’m aware about the CORS issue but I downloaded an extension to bypass that, all other pages have been showing except that menu page

Perhaps the error message might hold some importance here.

immense-eyrie-42860.herokuapp.com/Item:1 Failed to load resource: net::ERR_FAILED

https://immense-eyrie-42860.herokuapp.com/Item returns an Object with the key item which contains an array. Are you parsing the retrieved data correctly?

Does that mean everyone who visits your site also needs to have the same extension in order to use your site?

Actually the problem is from the backend developer, I informed him about it. That’s why I downloaded the extension on my own end to be able to view the site.

I’m parsing the data correctly as it’s also showing on codesandbox

Hi, @OlaoyeVic. It sounds like you have identified the root cause. Is that correct? If you would like additional assistance troubleshooting this, would you please let us know what questions remain unanswered?

My question is that could it be the CORS error preventing a single page from the site from showing?

Hi @OlaoyeVic,

The answer is, it depends. If your site has some static HTML to display that doesn’t rely on the data fetched from the backend, it should display the content.

However, if the site renders purely by JavaScript and the JS has errors in loading the data from elsewhere, you’d have such problems.

Another solution to fix the CORS issues would be to use Netlify Rewrites:

There is a static html file that’s supposed to be displayed. I’m also getting this error after deployment:
Uncaught TypeError: Object(…) is not a function

I’ve rectified the CORS error, but the page is still yet to display

Uncaught TypeError: Object(…) is not a function

I’m still seeing CORS error:

I tried the Netlify rewrites rule and disabled the CORS extension I downloaded on my browser and it’s working fine. It’s only the menu mage that’s not displaying.

On the homepage @OlaoyeVic I continue to see exactly the same thing @hrishikesh posted previously with CORS policy errors.

If I click through to the menu page I receive the same TypeError: Object(...) is not a function you previously posted.

But I have tried the netlify redirects, i don’t know the problem. Anyway, thanks.

It would be easier for us if we can see your source code.

The error doesn’t seem to be from Netlify’s end, but we would like to make sure you’ve done everything correctly as much as it was possible.

Thanks. Here’s a link to my source code:
https://github.com/OlaoyeVic/coldstone-order-app

Your _redirects file is misconfigured. It contains the following:

/*  /index.html  200
/immense-eyrie-42860/*  https://immense-eyrie-42860.herokuapp.com  200

while it should be like:

/immense-eyrie-42860/*  https://immense-eyrie-42860.herokuapp.com/:splat  200
/*  /index.html  200

This is because /* matches everything before /immense-eyrie-42860/* can.

Could you try that?