Error occurred prerendering page "/studio/[[...index]]". ReferenceError: window is not defined

simonhrogers commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.5-canary.20
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/simonhrogers/Croydon-Urban-Room

To Reproduce

While hosting this project on Vercel, 50% of deployments will fail for no clear reason.

Describe the Bug

Not apparently due to any particular change in my code, my project is failing/succeeding intermittently with this being the reason. No code change has introduced this error. Local builds don’t seem to error, just on Vercel. All environment variables are correct and nothing was changed that might have affected it when this error started to occur. Even reversing the commit will intermittently pass/fail. The issue started occurring yesterday.

Essentially build success/failure currently seems to be a coin-toss.

Error occurred prerendering page "/studio/[[...index]]". Read more: https://nextjs.org/docs/messages/prerender-error
--
17:33:56.717 | ReferenceError: window is not defined
17:33:56.717 | at Object.<anonymous> (/vercel/path0/node_modules/@sanity/ui/dist/index.js:775:60)
17:33:56.717 | at Module._compile (node:internal/modules/cjs/loader:1218:14)
17:33:56.717 | at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
17:33:56.718 | at Module.load (node:internal/modules/cjs/loader:1081:32)
17:33:56.718 | at Module._load (node:internal/modules/cjs/loader:922:12)
17:33:56.718 | at Module.require (node:internal/modules/cjs/loader:1105:19)
17:33:56.718 | at require (node:internal/modules/cjs/helpers:103:18)
17:33:56.718 | at Object.<anonymous> (/vercel/path0/node_modules/sanity/lib/index.js:1:6952)
17:33:56.718 | at Module._compile (node:internal/modules/cjs/loader:1218:14)
17:33:56.718 | at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)

> Build error occurred
--
17:33:59.288 | Error: Export encountered errors on following paths:
17:33:59.288 | /studio/[[...index]]
17:33:59.288 | at /vercel/path0/node_modules/next/dist/export/index.js:425:19
17:33:59.288 | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
17:33:59.288 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
17:33:59.289 | at async /vercel/path0/node_modules/next/dist/build/index.js:1422:21
17:33:59.289 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
17:33:59.289 | at async /vercel/path0/node_modules/next/dist/build/index.js:1280:17
17:33:59.289 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
17:33:59.289 | at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:73:29)
17:33:59.338 | Error: Command "npm run build" exited with 1
17:33:59.546 | BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

My _app.tsx is structure like this, although with or without the useRouter this problem persists so I believe it to be irrelevant:

import 'styles/sanity.css'
import 'styles/scss/main.scss'

import { AppProps } from 'next/app'
import Layout from 'components/global/Layout'

import { useRouter } from 'next/router';

export default function App({ Component, pageProps }: AppProps) {

  const router = useRouter()
  const currentRoute = router.pathname
  const baseRoute = currentRoute.split('/')[1]  

  return (
    <>
      {baseRoute && baseRoute === 'studio' ? (
        <Component {...pageProps} />
      ) : (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      )}
    </>
  )
}

and here is my package.json – although I was previously running an older, non-canary version of next (13.1.6) when the issue started so this does not seem to have any relation.

{
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next",
    "format": "npx prettier --write . --ignore-path .gitignore",
    "lint": "next lint -- --ignore-path .gitignore",
    "lint:fix": "npm run format && npm run lint -- --fix",
    "start": "next start",
    "type-check": "tsc --noEmit"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true
  },
  "dependencies": {
    "@mux-elements/mux-audio-react": "^0.3.12",
    "@mux/mux-video-react": "^0.7.7",
    "@portabletext/react": "^2.0.0",
    "@sanity/image-url": "^1.0.1",
    "@sanity/ui": "^1.0.12",
    "@sanity/vision": "^3.2.1",
    "@vercel/og": "^0.0.26",
    "a11y-react-emoji": "^1.2.0",
    "classnames": "^2.3.2",
    "date-fns": "^2.29.3",
    "intl-segmenter-polyfill": "^0.4.4",
    "next": "^13.2.4-canary.3",
    "next-sanity": "^4.1.6",
    "next-sanity-image": "^5.0.0",
    "rc-slider": "^10.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "react-resize-detector": "^8.0.3",
    "sanity": "^3.2.1",
    "sanity-plugin-asset-source-unsplash": "^1.0.6",
    "sanity-plugin-media": "^2.0.4",
    "sanity-plugin-mux-input": "^2.0.4",
    "sass": "^1.57.1",
    "server-only": "^0.0.1",
    "styled-components": "^5.3.6",
    "suspend-react": "^0.0.9",
    "swiper": "^9.1.0"
  },
  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
    "@types/react": "^18.0.26",
    "autoprefixer": "^10.4.13",
    "eslint": "^8.31.0",
    "eslint-config-next": "^13.1.1",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "postcss": "^8.4.21",
    "prettier": "^2.8.2",
    "prettier-plugin-packagejson": "^2.3.0",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.9.4"
  },
  "engines": {
    "node": ">=16"
  }
}

Expected Behavior

All builds to succeed, as they were until this time yesterday.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

JesseKoldewijn commented 1 year ago

Not gonna lie, it does kinda look like your ts config and setup is kind of out of wack. Just had a look-o-look locally and it both complained about the import order and a lot of ts-rules that were not being followed. so as long as you didn't disable all the type checks on build I'm kind of surprised it passed these checks.

balazsorban44 commented 1 year ago

Although I agree with the comment @JesseKoldewijn (as in the reproduction is not really minimal and has many unrelated warnings/errors and makes it hard for us to investigate further), I do advise against negative comments like "kind of out of wack". It is not constructive.

@simonhrogers From what I can tell, it sounds like @sanity/ui is trying to access window when it should not. (ie. the prerendering of the page at build-time.)

From the build error, it sounds like the problem is here:

https://github.com/sanity-io/ui/blob/f5846564bd4fe74a019191a42a9271ff088568c5/src/observers/resizeObserver.ts#L6-L9C29

This is unlikely a Next.js bug.

JesseKoldewijn commented 1 year ago

Although I agree with the comment @JesseKoldewijn (as in the reproduction is not really minimal and has many unrelated warnings/errors and makes it hard for us to investigate further), I do advise against negative comments like "kind of out of wack". It is not constructive.

@simonhrogers From what I can tell, it sounds like @sanity/ui is trying to access window when it should not. (ie. the prerendering of the page at build-time.)

From the build error, it sounds like the problem is here:

https://github.com/sanity-io/ui/blob/f5846564bd4fe74a019191a42a9271ff088568c5/src/observers/resizeObserver.ts#L6-L9C29

This is unlikely a Next.js bug.

Fair, and I apologize for my wording. Have had a lot of hard & long days combined with a recent passing of my grandpa. Nontheless I should not have worded my comment in such a way as I did.

And besides this specific point mentioned above I do agree with ya that the issue at hand here doesn't look like a Next.js bug👌

simonhrogers commented 1 year ago

Thanks both so much for your help! I’ll take this up with the Sanity team.

And sorry yes absolutely no need to apologise, my repo is definitely more than a bit out of whack! The bug struck unexpectedly and at a very inopportune time – sorry for not providing a simpler repo.

stipsan commented 1 year ago

Hi all, we got notified by @balazsorban44 and are deploying a fix. You'll probably need to delete your package-lock.json, yarn.lock or pnpm-lock.yaml file and reinstall to get the fix (after it's released).

stipsan commented 1 year ago

It's out: https://github.com/sanity-io/ui/releases/tag/v1.3.1

github-actions[bot] commented 1 year ago

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js