First time load breaks

[danilockthar]

Hi guys, im having this problem with first time users who load my page for the first time. After refresh the page works on every occasion. In my build or console i cant see the problem and dont know how to fix this if im not receiving some clue on what its breaking it.

I made a test in webpagetest who show the first time rendering and it show the same error on first time users. Here is the link with the image error.

https://www.webpagetest.org/result/200610_53_e85d1d405e3bedec5264484b132e00e1/
(the favicon.ico 404 red its the same on my others next js deploys who work great on first time load , besides the favicon ico works in my page )

Any clue on what could be wrong ? i was thinking it was the google tag manager or the styled component on ssr i put in my _document but if i remove it , doesnt change anything.

[jamesmosier]

any chance you can share any code?

[danilockthar]

Maybe from _document.js ? Im not really sure what to show because i dont know where the error is generated and cant reproduce it in dispositives where the page has loaded correctly.

[danilockthar]

`import React from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
import PropTypes from 'prop-types';

import { GA_TRACKING_ID } from '../lib/gtag'

export default class extends Document {

static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage

try {
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
    })

  const initialProps = await Document.getInitialProps(ctx)
  return {
    ...initialProps,
    styles: (
      <>
        {initialProps.styles}
        {sheet.getStyleElement()}
      </>
    ),
  }
} finally {
  sheet.seal()
}

}
render() {
return (


{/* Global Site Tag (gtag.js) - Google Analytics */}
<script
async
src={https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}}
/>
<script
dangerouslySetInnerHTML={{
__html: window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '${GA_TRACKING_ID}', { page_path: window.location.pathname, });,
}}
/>

)
}
}`

this _document.js differs to my other projects working right,

[danilockthar]

There are my updated build logs
`13:29:46.816
Retrieving list of deployment files...
13:29:47.930
Downloading 67 deployment files...
13:29:49.676
Installing build runtime...
13:29:50.133
Build runtime installed: 456.881ms
13:29:50.873
Installing dependencies...
13:30:02.475

[email protected] install /vercel/730485cf/node_modules/bcrypt
13:30:02.475
node-pre-gyp install --fallback-to-build
13:30:02.653
node-pre-gyp WARN Using request for node-pre-gyp https download
13:30:03.081
[bcrypt] Success: "/vercel/730485cf/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node" is installed via remote
13:30:03.807
npm WARN [email protected] No description
13:30:03.807
npm WARN [email protected] No repository field.
13:30:03.807
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack/node_modules/fsevents):
13:30:03.807
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
13:30:03.807
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
13:30:03.807
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
13:30:03.810
added 955 packages from 502 contributors in 12.539s
13:30:04.226
36 packages are looking for funding
13:30:04.226
run npm fund for details
13:30:04.261
Running "npm run build"
13:30:04.446
[email protected] build /vercel/730485cf
13:30:04.446
next build
13:30:04.994
Warning: No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
13:30:04.995
Creating an optimized production build...
13:30:05.009
Attention: Next.js now collects completely anonymous telemetry regarding usage.
13:30:05.009
This information is used to shape Next.js' roadmap and prioritize features.
13:30:05.009
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
13:30:05.009
https://nextjs.org/telemetry
13:30:05.760
Using external babel configuration
13:30:05.760
Location: "/vercel/730485cf/.babelrc"
13:30:22.275
Compiled successfully.
13:30:22.276
Automatically optimizing pages...
13:30:24.065
Page Size First Load JS
13:30:24.065
┌ ○ / 1.18 kB 205 kB
13:30:24.065
├ /_app 748 B 143 kB
13:30:24.065
├ ○ /404 2.59 kB 145 kB
13:30:24.065
├ λ /api/checkout
13:30:24.065
├ λ /api/cloud
13:30:24.065
├ λ /api/ipn
13:30:24.065
├ λ /api/login
13:30:24.065
├ λ /api/logout
13:30:24.065
├ λ /api/profile
13:30:24.065
├ λ /api/signup
13:30:24.065
├ ○ /cart 3.9 kB 205 kB
13:30:24.065
├ ○ /nosotros 491 B 204 kB
13:30:24.065
├ ○ /privacidad 7.99 kB 208 kB
13:30:24.065
├ λ /profile 2.99 kB 203 kB
13:30:24.065
├ ○ /store 9.23 kB 210 kB
13:30:24.065
├ ○ /store/[slug] 8.77 kB 210 kB
13:30:24.065
└ ○ /terminos 15.9 kB 216 kB
13:30:24.065

• First Load JS shared by all 143 kB
  13:30:24.065
  ├ static/pages/_app.js 748 B
  13:30:24.065
  ├ chunks/05d954cf.9581c1.js 15.7 kB
  13:30:24.065
  ├ chunks/3bffb8aa.a473a8.js 51.9 kB
  13:30:24.065
  ├ chunks/commons.56c0c6.js 10.5 kB
  13:30:24.065
  ├ chunks/ec3c0944c3d8502d78350b3f6f37ca8c6a08e2c3.a4ada9.js 16 kB
  13:30:24.065
  ├ chunks/framework.cd0205.js 40.9 kB
  13:30:24.065
  ├ runtime/main.c35632.js 5.88 kB
  13:30:24.066
  ├ runtime/webpack.5dbba5.js 1.18 kB
  13:30:24.066
  └ css/65f4c6e2a1623270d122.css 1.85 kB
  13:30:24.066
  λ (Lambda) server-side renders at runtime (uses getInitialProps or getServerSideProps)
  13:30:24.066
  ○ (Static) automatically rendered as static HTML (uses no initial props)
  13:30:24.066
  ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)
  13:30:33.748
  Traced Next.js serverless functions for external files in: 9573.474ms
  13:30:35.699
  Compressed shared serverless function files: 1950.737ms
  13:30:35.959
  All serverless functions created in: 258.219ms
  13:30:36.185
  Uploading build outputs...
  13:30:40.363
  Build completed. Populating build cache...
  13:30:46.695
  Uploading build cache [21.79 MB]...
  13:30:47.187
  Build cache uploaded: 491.748ms
  13:30:47.199
  Done with "package.json"`

Even the vercel image show the first time load as error.

@jamesmosier i be able to reproduce the error in the console, thanks god, but im not getting the meaning.

The "framework" undefined value is on _next/static/chunks/framework

Hope with this error you could help me

[jamesmosier]

The error isn't it framework (that's just who output the error) it is in one of your own project files.

I put a breakpoint in the obfuscated code and s.data.value was the issue. s.data is an array with length 0.

Do you have any code anywhere that does some_variable_name.data.value? If so, what does that code look like? From the obfuscated code it appears to be near st_cart. And that breakpoint isn't hit after the first failure on that first load, so are you using something like unstable_revalidate? Or do you have some catch logic returning the wrong shape of data?

This one is kinda tricky to track down without seeing all the code 😄 there could be any number of things going on.

[danilockthar]

You are totally right! data.value is an useSwr checking for localStorage item that doesnt exist when users initialize the page :D and return undefined ! thank you James you are great.