Build Process Diagnosis

2026-07-064 turns15,402 charsgpt-5-5

Summary

User is diagnosing build failures in a Next.js project caused by ESLint errors related to synchronous scripts.

Messages

16:04.145 Running build in Washington, D.C., USA (East) – iad1 (Turbo Build Machine)
16:04.145 Build machine configuration: 30 cores, 60 GB
16:04.314 Cloning github.com/kliewerdaniel/a10 (Branch: main, Commit: 61ddad1)
16:06.969 Cloning completed: 2.655s
16:07.025 Restored build cache from previous deployment (FTYajUBjDB7JD5HJCk8am1ej4VGG)
16:07.213 Running "vercel build"
16:07.222 Vercel CLI 54.19.0
16:07.633 Installing dependencies...
16:08.713 
16:08.713 up to date in 933ms
16:08.714 
16:08.714 278 packages are looking for funding
16:08.714   run `npm fund` for details
16:08.740 Detected Next.js version: 16.2.9
16:08.747 Running "npm run build"
16:08.816 
16:08.816 > sovereign-ai-site@0.1.0 build
16:08.816 > next build
16:08.816 
16:09.327   Applying modifyConfig from Vercel
16:09.343 ▲ Next.js 16.2.9 (Turbopack)
16:09.343 
16:09.370   Creating an optimized production build ...
16:12.528 ✓ Compiled successfully in 2.9s
16:12.531   Running TypeScript ...
16:15.397   Finished TypeScript in 2.9s ...
16:15.400   Collecting page data using 16 workers ...
16:15.789   Generating static pages using 16 workers (0/162) ...
16:16.983   Generating static pages using 16 workers (40/162) 
16:17.153   Generating static pages using 16 workers (80/162)

From the log you shared, the build is actually succeeding so far.

Here's what has completed successfully:

- ✅ Repository cloned
- ✅ Build cache restored
- ✅ Dependencies installed
- ✅ Next.js 16.2.9 detected
- ✅ Production compilation completed
- ✅ TypeScript passed (no type errors)
- ✅ Static generation has started

The last line:

```text
Generating static pages using 16 workers (80/162)
```

is not an error—it's just progress. Next.js is pre-rendering 162 pages, likely because your blog has a large number of static routes.

If the deployment eventually failed, the actual error will appear **after** this point. Common examples are:

- `Error occurred prerendering page...`
- `Failed to collect page data`
- `Export encountered an error`
- `Command "npm run build" exited with 1`
- `Error: ENOENT`
- `ReferenceError`
- `Out of memory`
- `Timeout`

I don't yet see any of those.

Please paste the remainder of the build log—from line 80/162 onward until the deployment finishes or fails. The last 20–50 lines usually contain the information needed to diagnose the issue.

gpt-5-5

bash -c npm run lint
> sovereign-ai-site@0.1.0 lint
> eslint
> 34 |         z: (Math.random() - 0.5) * 12 - 4,
✖ 16 problems (10 errors, 6 warnings)
/vercel/sandbox/repo/src/app/layout.tsx
  69:9   error    Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts                                                                                        @next/next/no-sync-scripts
  70:11  error    Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts                                                                                        @next/next/no-sync-scripts
  72:9   warning  Prefer `GoogleTagManager` component from `@next/third-parties/google` when using the inline script for Google Tag Manager. See: https://nextjs.org/docs/messages/next-script-for-ga  @next/next/next-script-for-ga
/vercel/sandbox/repo/src/app/page.tsx
  8:7  warning  'BOOK_URL' is assigned a value but never used  @typescript-eslint/no-unused-vars
/vercel/sandbox/repo/src/components/blog/BlogCard.tsx
  21:13  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
  52:9   warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
/vercel/sandbox/repo/src/components/layout/Navbar.tsx
  24:5  error  Error: Calling setState synchronously within an effect can trigger cascading renders
Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
* Update external systems with the latest state from React.
* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
/vercel/sandbox/repo/src/components/layout/Navbar.tsx:24:5
  22 |     const stored = localStorage.getItem('theme');
  23 |     const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
> 24 |     setTheme(stored as 'light' | 'dark' || preferred);
     |     ^^^^^^^^ Avoid calling setState() directly within an effect
  25 |   }, []);
  26 |
  27 |   useEffect(() => {  react-hooks/set-state-in-effect
/vercel/sandbox/repo/src/components/three/HeroBackground.tsx
  32:13  error  Error: Cannot call impure function during render
  86:13  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
/vercel/sandbox/repo/src/components/three/HeroBackground.tsx:32:13
  30 |
  31 |       return {
> 32 |         x: (Math.random() - 0.5) * 28,
     |             ^^^^^^^^^^^^^ Cannot call impure function
  33 |         y: (Math.random() - 0.5) * 18,
  34 |         z: (Math.random() - 0.5) * 12 - 4,
  35 |         speed: Math.random() * 0.15 + 0.02,                                                                            react-hooks/purity
  33:13  error  Error: Cannot call impure function during render
`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
/vercel/sandbox/repo/src/components/three/HeroBackground.tsx:33:13
  31 |       return {
  32 |         x: (Math.random() - 0.5) * 28,
> 33 |         y: (Math.random() - 0.5) * 18,
     |             ^^^^^^^^^^^^^ Cannot call impure function
  34 |         z: (Math.random() - 0.5) * 12 - 4,
  35 |         speed: Math.random() * 0.15 + 0.02,
  36 |         offset: Math.random() * Math.PI * 2,                               react-hooks/purity
  34:13  error  Error: Cannot call impure function during render
`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
/vercel/sandbox/repo/src/components/three/HeroBackground.tsx:34:13
  32 |         x: (Math.random() - 0.5) * 28,
  33 |         y: (Math.random() - 0.5) * 18,
/vercel/sandbox/repo/src/app/blog/[slug]/page.tsx
     |             ^^^^^^^^^^^^^ Cannot call impure function
  35 |         speed: Math.random() * 0.15 + 0.02,
  36 |         offset: Math.random() * Math.PI * 2,
  37 |         scale: Math.random() * 0.06 + 0.02,  react-hooks/purity
  35:16  error  Error: Cannot call impure function during render
`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
/vercel/sandbox/repo/src/components/three/HeroBackground.tsx:35:16
  33 |         y: (Math.random() - 0.5) * 18,
  34 |         z: (Math.random() - 0.5) * 12 - 4,
> 35 |         speed: Math.random() * 0.15 + 0.02,
     |                ^^^^^^^^^^^^^ Cannot call impure function
  36 |         offset: Math.random() * Math.PI * 2,
  37 |         scale: Math.random() * 0.06 + 0.02,
  38 |       };                             react-hooks/purity
  36:17  error  Error: Cannot call impure function during render
`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
/vercel/sandbox/repo/src/components/three/HeroBackground.tsx:36:17
  34 |         z: (Math.random() - 0.5) * 12 - 4,
  35 |         speed: Math.random() * 0.15 + 0.02,
> 36 |         offset: Math.random() * Math.PI * 2,
     |                 ^^^^^^^^^^^^^ Cannot call impure function
  37 |         scale: Math.random() * 0.06 + 0.02,
  38 |       };
  39 |     });                                                           react-hooks/purity
  37:16  error  Error: Cannot call impure function during render
`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
/vercel/sandbox/repo/src/components/three/HeroBackground.tsx:37:16
  35 |         speed: Math.random() * 0.15 + 0.02,
  36 |         offset: Math.random() * Math.PI * 2,
> 37 |         scale: Math.random() * 0.06 + 0.02,
     |                ^^^^^^^^^^^^^ Cannot call impure function
  38 |       };
  39 |     });
  40 |                                                                                                       react-hooks/purity
/vercel/sandbox/repo/src/components/three/SafeCanvas.tsx
  44:7  error  Error: Calling setState synchronously within an effect can trigger cascading renders
Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:
* Update external systems with the latest state from React.
* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).
/vercel/sandbox/repo/src/components/three/SafeCanvas.tsx:44:7
  42 |       const canvas = document.createElement('canvas');
  43 |       const ok = !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
> 44 |       setMounted(ok);
     |       ^^^^^^^^^^ Avoid calling setState() directly within an effect
  45 |     } catch {
  46 |       setMounted(false);
  47 |     }  react-hooks/set-state-in-effect
/vercel/sandbox/repo/src/components/ui/Card.tsx
  10:50  warning  'hover' is assigned a value but never used  @typescript-eslint/no-unused-vars
`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
Exited with code 1.

The good news is that **your application builds successfully**. The deployment is failing because **ESLint is configured to treat errors as fatal**, and Next.js 16 + the new React lint rules are stricter than previous versions.

There are **four actual issues** causing the failure.

---

## 1. `layout.tsx` — synchronous `<script>` tags

```
error @next/next/no-sync-scripts
```

You probably have something like:

```tsx
<script src="..."></script>
```

or

```tsx
<script dangerouslySetInnerHTML={{...}} />
```

Replace it with:

```tsx
import Script from "next/script";
```

and

```tsx
<Script
  src="https://..."
  strategy="afterInteractive"
/>
```

If it's Google Analytics or GTM, use the Next.js component instead:

```tsx
import { GoogleTagManager } from "@next/third-parties/google";

<GoogleTagManager gtmId="GTM-XXXXXXX" />
```

---

## 2. `HeroBackground.tsx` — `Math.random()` during render

This is generating **most** of the errors.

You're probably doing something like

```tsx
const particles = Array.from({ length: 150 }).map(() => ({
    x: Math.random(),
    y: Math.random(),
}));
```

inside the component.

React 19 forbids this because every render changes the output.

Instead:

```tsx
const particles = useMemo(() => {
    return Array.from({ length: 150 }, () => ({
        x: (Math.random() - 0.5) * 28,
        y: (Math.random() - 0.5) * 18,
        z: (Math.random() - 0.5) * 12 - 4,
        speed: Math.random() * 0.15 + 0.02,
        offset: Math.random() * Math.PI * 2,
        scale: Math.random() * 0.06 + 0.02,
    }));
}, []);
```

Even better is

```tsx
const particles = useRef(generateParticles()).current;
```

because it never changes.

---

## 3. `Navbar.tsx`

This

```tsx
useEffect(() => {
    const stored = localStorage.getItem("theme");
    const preferred =
        window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light";

    setTheme(stored || preferred);
}, []);
```

triggers

```
react-hooks/set-state-in-effect
```

The recommended pattern is lazy initialization:

```tsx
const [theme, setTheme] = useState(() => {
    if (typeof window === "undefined") return "light";

    return (
        localStorage.getItem("theme") ??
        (window.matchMedia("(prefers-color-scheme: dark)").matches
            ? "dark"
            : "light")
    );
});
```

Then remove that effect entirely.

---

## 4. `SafeCanvas.tsx`

Same issue.

Instead of

```tsx
useEffect(() => {
    setMounted(checkWebGL());
}, []);
```

use

```tsx
const [mounted] = useState(() => checkWebGL());
```

or compute it with

```tsx
const mounted = useMemo(checkWebGL, []);
```

---

# Warnings (won't fail the build)

These don't stop deployment:

- unused `BOOK_URL`
- unused `hover`
- `<img>` instead of `next/image`

---

# If you just want the site deployed immediately

You can temporarily disable ESLint during builds.

In `next.config.ts`:

```ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
};

export default nextConfig;
```

Then Vercel will deploy successfully while still allowing you to run `npm run lint` locally to fix the issues over time.

## My recommendation

Don't spend time fighting every new React 19 lint rule if your goal is shipping your blog. Add:

```ts
eslint: {
  ignoreDuringBuilds: true,
}
```

to `next.config.ts` so deployments aren't blocked, then fix the lint issues incrementally. The only ones I'd prioritize are the synchronous `<script>` tags and the `Math.random()` usage, since those reflect genuine best-practice improvements.

gpt-5-5