UI Crashes after netlify deploy

Netlify site name: https://stirring-swan-889d3b.netlify.app/

I’m not sure what is causing this issue and what should I start to look into.

The image on my local machine after build:

Build Logs:

Summary
11:42:13 AM: build-image version: f3cf973139e031ba40b2c841e0fc2ea6c65cdbab (focal)
11:42:13 AM: buildbot version: f3cf973139e031ba40b2c841e0fc2ea6c65cdbab
11:42:13 AM: Fetching cached dependencies
11:42:13 AM: Starting to download cache of 160.3MB
11:42:14 AM: Finished downloading cache in 1.661s
11:42:14 AM: Starting to extract cache
11:42:16 AM: Finished extracting cache in 1.197s
11:42:16 AM: Finished fetching cache in 2.913s
11:42:16 AM: Starting to prepare the repo for build
11:42:16 AM: Preparing Git Reference refs/heads/temp
11:42:17 AM: Parsing package.json dependencies
11:42:18 AM: Starting build script
11:42:18 AM: Installing dependencies
11:42:18 AM: Python version set to 2.7
11:42:19 AM: Started restoring cached Node.js version
11:42:19 AM: Finished restoring cached Node.js version
11:42:20 AM: v16.19.1 is already installed.
11:42:20 AM: Now using node v16.19.1 (npm v8.19.3)
11:42:20 AM: Enabling Node.js Corepack
11:42:20 AM: Started restoring cached build plugins
11:42:20 AM: Finished restoring cached build plugins
11:42:20 AM: Attempting Ruby version 2.7.2, read from environment
11:42:21 AM: Using Ruby version 2.7.2
11:42:21 AM: Using PHP version 8.0
11:42:21 AM: Started restoring cached corepack dependencies
11:42:21 AM: Finished restoring cached corepack dependencies
11:42:21 AM: No npm workspaces detected
11:42:21 AM: Started restoring cached node modules
11:42:21 AM: Finished restoring cached node modules
11:42:21 AM: Installing npm packages using npm version 8.19.3
11:42:22 AM: up to date, audited 98 packages in 382ms
11:42:22 AM: 20 packages are looking for funding
11:42:22 AM:   run `npm fund` for details
11:42:22 AM: found 0 vulnerabilities
11:42:22 AM: npm packages installed
11:42:22 AM: Started restoring cached go cache
11:42:22 AM: Finished restoring cached go cache
11:42:22 AM: go version go1.19.7 linux/amd64
11:42:22 AM: Detected 1 framework(s)
11:42:22 AM: "next" at version "13.1.4"
11:42:22 AM: Section completed: initializing
11:42:24 AM: ​
11:42:24 AM:   Netlify Build                                                 
11:42:24 AM: ────────────────────────────────────────────────────────────────
11:42:24 AM: ​
11:42:24 AM: ❯ Version
11:42:24 AM:   @netlify/build 29.6.7
11:42:24 AM: ​
11:42:24 AM: ❯ Flags
11:42:24 AM:   baseRelDir: true
11:42:24 AM:   buildId: 640ffaf7bb7625000886f60f
11:42:24 AM:   deployId: 640ffaf7bb7625000886f611
11:42:24 AM: ​
11:42:24 AM: ❯ Current directory
11:42:24 AM:   /opt/build/repo
11:42:24 AM: ​
11:42:24 AM: ❯ Config file
11:42:24 AM:   No config file was defined: using default values.
11:42:24 AM: ​
11:42:24 AM: ❯ Context
11:42:24 AM:   production
11:42:24 AM: ​
11:42:24 AM: ❯ Using Next.js Runtime - v4.32.0
11:42:25 AM: ​
11:42:25 AM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
11:42:25 AM: ────────────────────────────────────────────────────────────────
11:42:25 AM: ​
11:42:25 AM: Next.js cache restored.
11:42:25 AM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
11:42:25 AM: ​
11:42:25 AM: (@netlify/plugin-nextjs onPreBuild completed in 62ms)
11:42:25 AM: ​
11:42:25 AM:   2. Build command from Netlify app                             
11:42:25 AM: ────────────────────────────────────────────────────────────────
11:42:25 AM: ​
11:42:25 AM: $ npm run build
11:42:25 AM: > temp@0.1.0 build
11:42:25 AM: > next build
11:42:26 AM: info  - Linting and checking validity of types...
11:42:27 AM: info  - Creating an optimized production build...
11:42:27 AM: info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
11:42:28 AM: info  - Using external babel configuration from /opt/build/repo/.babelrc
11:42:30 AM: info  - Compiled successfully
11:42:30 AM: info  - Collecting page data...
11:42:31 AM: info  - Generating static pages (0/5)
11:42:32 AM: info  - Generating static pages (1/5)
11:42:32 AM: info  - Generating static pages (2/5)
11:42:32 AM: info  - Generating static pages (3/5)
11:42:32 AM: info  - Generating static pages (5/5)
11:42:32 AM: info  - Finalizing page optimization...
11:42:32 AM: Route (pages)                              Size     First Load JS
11:42:32 AM: ┌ λ /                                      2.2 kB          127 kB
11:42:32 AM: ├   /_app                                  0 B             125 kB
11:42:32 AM: ├ ○ /404                                   2.66 kB         128 kB
11:42:32 AM: ├ ○ /a (354 ms)                            233 B           126 kB
11:42:32 AM: ├ ○ /about (370 ms)                        2.58 kB         128 kB
11:42:32 AM: ├ λ /api/hello                             0 B             125 kB
11:42:32 AM: └ ○ /contact (363 ms)                      249 B           126 kB
11:42:32 AM: + First Load JS shared by all              127 kB
11:42:32 AM:   ├ chunks/framework-2c79e2a64abdb08b.js   45.2 kB
11:42:32 AM:   ├ chunks/main-87a78c9665188116.js        31.6 kB
11:42:32 AM:   ├ chunks/pages/_app-d025f2f5e5b4853e.js  46.7 kB
11:42:32 AM:   ├ chunks/webpack-027cce7c880c158a.js     1.74 kB
11:42:32 AM:   └ css/2ca595733e92d595.css               2.05 kB
11:42:32 AM: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
11:42:32 AM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
11:42:32 AM: ​
11:42:32 AM: (build.command completed in 7.1s)
11:42:32 AM: ​
11:42:32 AM:   3. @netlify/plugin-nextjs (onBuild event)                     
11:42:32 AM: ────────────────────────────────────────────────────────────────
11:42:32 AM: ​
11:42:32 AM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
11:42:32 AM: Done
11:42:32 AM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js
11:42:32 AM: Done
11:42:32 AM: Moving static page files to serve from CDN...
11:42:32 AM: Moved 3 files
11:42:32 AM: You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.
11:42:32 AM: Netlify configuration property "redirects" value changed to [
11:42:32 AM:   { from: '/_next/static/*', to: '/static/:splat', status: 200 },
11:42:32 AM:   {
11:42:32 AM:     from: '/_next/image*',
11:42:32 AM:     query: { url: ':url', w: ':width', q: ':quality' },
11:42:32 AM:     to: '/_ipx/w_:width,q_:quality/:url',
11:42:32 AM:     status: 301
11:42:32 AM:   },
11:42:32 AM:   { from: '/_ipx/*', to: '/.netlify/builders/_ipx', status: 200 },
11:42:32 AM:   { from: '/cache/*', to: '/404.html', status: 404, force: true },
11:42:32 AM:   { from: '/server/*', to: '/404.html', status: 404, force: true },
11:42:32 AM:   { from: '/serverless/*', to: '/404.html', status: 404, force: true },
11:42:32 AM:   { from: '/trace', to: '/404.html', status: 404, force: true },
11:42:32 AM:   { from: '/traces', to: '/404.html', status: 404, force: true },
11:42:32 AM:   {
11:42:32 AM:     from: '/routes-manifest.json',
11:42:32 AM:     to: '/404.html',
11:42:32 AM:     status: 404,
11:42:32 AM:     force: true
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/build-manifest.json',
11:42:32 AM:     to: '/404.html',
11:42:32 AM:     status: 404,
11:42:32 AM:     force: true
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/prerender-manifest.json',
11:42:32 AM:     to: '/404.html',
11:42:32 AM:     status: 404,
11:42:32 AM:     force: true
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/react-loadable-manifest.json',
11:42:32 AM:     to: '/404.html',
11:42:32 AM:     status: 404,
11:42:32 AM:     force: true
11:42:32 AM:   },
11:42:32 AM:   { from: '/BUILD_ID', to: '/404.html', status: 404, force: true },
11:42:32 AM:   {
11:42:32 AM:     from: '/api/*',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/Gilroy-ExtraBold.otf',
11:42:32 AM:     to: '/Gilroy-ExtraBold.otf',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/Gilroy-Light.otf',
11:42:32 AM:     to: '/Gilroy-Light.otf',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/Group 2.svg',
11:42:32 AM:     to: '/Group 2.svg',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/Untitled.png',
11:42:32 AM:     to: '/Untitled.png',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/Work1dummy.png',
11:42:32 AM:     to: '/Work1dummy.png',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/arrow.svg',
11:42:32 AM:     to: '/arrow.svg',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/dota.jpg',
11:42:32 AM:     to: '/dota.jpg',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/dota.png',
11:42:32 AM:     to: '/dota.png',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/dummy.png',
11:42:32 AM:     to: '/dummy.png',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/favicon.ico',
11:42:32 AM:     to: '/favicon.ico',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/noise.gif',
11:42:32 AM:     to: '/noise.gif',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/vercel.svg',
11:42:32 AM:     to: '/vercel.svg',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/projects/Project 1 Snapshot-min.png',
11:42:32 AM:     to: '/projects/Project 1 Snapshot-min.png',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/projects/Project 2 Snapshot-min.png',
11:42:32 AM:     to: '/projects/Project 2 Snapshot-min.png',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/projects/Project 3 Snapshot-min.png',
11:42:32 AM:     to: '/projects/Project 3 Snapshot-min.png',
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     status: 200
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/*',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     conditions: { Cookie: [Array] },
11:42:32 AM:     force: true
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/_next/data/bll-ruh8BqNfhN6ldydWQ/index.json',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     force: false
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     force: false
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/_next/data/bll-ruh8BqNfhN6ldydWQ/a.json',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     force: false
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/a',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     force: false
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/_next/data/bll-ruh8BqNfhN6ldydWQ/about.json',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     force: false
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/about',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     force: false
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/_next/data/bll-ruh8BqNfhN6ldydWQ/contact.json',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     force: false
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/contact',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200,
11:42:32 AM:     force: false
11:42:32 AM:   },
11:42:32 AM:   {
11:42:32 AM:     from: '/*',
11:42:32 AM:     to: '/.netlify/functions/___netlify-handler',
11:42:32 AM:     status: 200
11:42:32 AM:   }
11:42:32 AM: ].
11:42:32 AM: ​
11:42:32 AM: (@netlify/plugin-nextjs onBuild completed in 124ms)
11:42:32 AM: ​
11:42:32 AM:   4. Functions bundling                                         
11:42:32 AM: ────────────────────────────────────────────────────────────────
11:42:32 AM: ​
11:42:32 AM: Packaging Functions from .netlify/functions-internal directory:
11:42:32 AM:  - ___netlify-handler/___netlify-handler.js
11:42:32 AM:  - ___netlify-odb-handler/___netlify-odb-handler.js
11:42:32 AM:  - _ipx/_ipx.js
11:42:32 AM: ​
11:42:47 AM: ​
11:42:47 AM: (Functions bundling completed in 15s)
11:42:47 AM: ​
11:42:47 AM:   5. Edge Functions bundling                                    
11:42:47 AM: ────────────────────────────────────────────────────────────────
11:42:47 AM: ​
11:42:48 AM: ​
11:42:48 AM: (Edge Functions bundling completed in 402ms)
11:42:48 AM: ​
11:42:48 AM:   6. @netlify/plugin-nextjs (onPostBuild event)                 
11:42:48 AM: ────────────────────────────────────────────────────────────────
11:42:48 AM: ​
11:42:48 AM: Next.js cache saved.
11:42:48 AM: ​
11:42:48 AM: (@netlify/plugin-nextjs onPostBuild completed in 58ms)
11:42:48 AM: ​
11:42:48 AM:   7. Deploy site                                                
11:42:48 AM: ────────────────────────────────────────────────────────────────
11:42:48 AM: ​
11:42:48 AM: Starting to deploy site from '.next'
11:42:48 AM: Calculating files to upload
11:42:48 AM: 21 new files to upload
11:42:48 AM: 2 new functions to upload
11:42:56 AM: Section completed: deploying
11:42:56 AM: Site deploy was successfully initiated
11:42:56 AM: ​
11:42:56 AM: Starting post processing
11:42:56 AM: (Deploy site completed in 8.3s)
11:42:56 AM: ​
11:42:56 AM:   Netlify Build Complete                                        
11:42:56 AM: ────────────────────────────────────────────────────────────────
11:42:56 AM: Post processing - HTML
11:42:56 AM: ​
11:42:56 AM: (Netlify Build completed in 32.7s)
11:42:57 AM: Caching artifacts
11:42:57 AM: Started saving node modules
11:42:57 AM: Finished saving node modules
11:42:57 AM: Started saving build plugins
11:42:57 AM: Finished saving build plugins
11:42:57 AM: Post processing - header rules
11:42:57 AM: Started saving corepack cache
11:42:57 AM: Finished saving corepack cache
11:42:57 AM: Started saving pip cache
11:42:57 AM: Post processing - redirect rules
11:42:57 AM: Finished saving pip cache
11:42:57 AM: Started saving emacs cask dependencies
11:42:57 AM: Finished saving emacs cask dependencies
11:42:57 AM: Post processing done
11:42:57 AM: Started saving maven dependencies
11:42:57 AM: Finished saving maven dependencies
11:42:57 AM: Started saving boot dependencies
11:42:57 AM: Section completed: postprocessing
11:42:57 AM: Finished saving boot dependencies
11:42:57 AM: Started saving rust rustup cache
11:42:57 AM: Finished saving rust rustup cache
11:42:57 AM: Started saving go dependencies
11:42:57 AM: Finished saving go dependencies
11:42:57 AM: Build script success
11:42:57 AM: Section completed: building
11:42:58 AM: Uploading Cache of size 160.7MB
11:42:58 AM: Site is live ✨
11:42:59 AM: Section completed: cleanup
11:42:59 AM: Finished processing build request in 46.422s

Hi @smsm23 :wave:t6: welcome to the forums! Thanks so much for reaching out.

I’m not seeing this issue on your live site but I do see errors on your page in the console. Does your UI rely on server side code to fetch your data? This issue with your UI sometimes happens with server side codes when the server is overloaded.

Hi, thank you for replying, no I’m not using servers, for now, all content is local.

The thing I’m confused about is that the UI drastically changes after deploying,
UI after deployment:

It looks like you are missing some css in production. Best way to troubleshoot is to compare the locally built site with the remote one.

To download the site files (everything netlify has built) from netlify then you can click the download button inside a deploy :slight_smile:

1 Like