TTC
Theo's Typesafe Cult•2y ago
BigLung

Incomprehensible build failures

Howdy yall, pretty new to vercel / t3 stack here. I am getting a build failure on my new t3 app that I can't make heads or tails of. The build output is as attached. Has anyone seen anything like this before? Do you have any suggestions for unblocking this build failure?

message.txt

6 Replies
BigLung
BigLungOP•2y ago
> Build error occurred
Error: Export encountered errors on following paths:
    /home
    /home: /en/home
    at /vercel/path0/node_modules/next/dist/export/index.js:415:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:1400:21
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:1259:17
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:66:29)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
Deployment completed
BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1
> Build error occurred
Error: Export encountered errors on following paths:
    /home
    /home: /en/home
    at /vercel/path0/node_modules/next/dist/export/index.js:415:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:1400:21
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:1259:17
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:66:29)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
Deployment completed
BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1
Error occurred prerendering page "/en/home". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'name')
    at Home (/vercel/path0/.next/server/pages/home.js:59:41)
    at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
info  - Generating static pages (25/34)
info  - Generating static pages (34/34)
Error occurred prerendering page "/en/home". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'name')
    at Home (/vercel/path0/.next/server/pages/home.js:59:41)
    at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
info  - Generating static pages (25/34)
info  - Generating static pages (34/34)
Error occurred prerendering page "/home". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'name')
    at Home (/vercel/path0/.next/server/pages/home.js:59:41)
    at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
info  - Generating static pages (8/34)
info  - Generating static pages (16/34)
Error occurred prerendering page "/home". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of null (reading 'name')
    at Home (/vercel/path0/.next/server/pages/home.js:59:41)
    at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:71:145)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:217)
info  - Generating static pages (8/34)
info  - Generating static pages (16/34)
James Perkins
James Perkins•2y ago
What does your home page look lke. Looks like you are expecting name to not be null as part of your rendering. Cannot read properties of null (reading 'name')
BigLung
BigLungOP•2y ago
This is my home page 
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { PrimaryButton } from "../components/customButtons";
import { useEventStore } from "../state/store";
import { getFormattedDate } from "../utils/date";

const Home = () => {
  const router = useRouter();
  const { data: session, status } = useSession();
  const promotedEvent = useEventStore((state) => state.promotedEvent);

  return (
    <div
      className={`
        mt-8
        h-screen
        items-center
        justify-center
        space-y-2
        text-center
      `}
    >
      <p
        className={`
          text-4xl
        text-red-600
        `}
      >
        Aces Jiu Jitsu Club
      </p>
      <p
        className={`
                text-2xl
              text-blue-600
           `}
      >
        {promotedEvent.name}
      </p>
      <p
        className={`
                text-xl
                text-black
           `}
      >
        {getFormattedDate(promotedEvent.date)}
      </p>
      <PrimaryButton
        className={`
          mt-4
        `}
        onClick={() => router.push("purchase")}
      >
        Purchase Tickets
      </PrimaryButton>
    </div>
  );
};

export default Home;
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { PrimaryButton } from "../components/customButtons";
import { useEventStore } from "../state/store";
import { getFormattedDate } from "../utils/date";

const Home = () => {
  const router = useRouter();
  const { data: session, status } = useSession();
  const promotedEvent = useEventStore((state) => state.promotedEvent);

  return (
    <div
      className={`
        mt-8
        h-screen
        items-center
        justify-center
        space-y-2
        text-center
      `}
    >
      <p
        className={`
          text-4xl
        text-red-600
        `}
      >
        Aces Jiu Jitsu Club
      </p>
      <p
        className={`
                text-2xl
              text-blue-600
           `}
      >
        {promotedEvent.name}
      </p>
      <p
        className={`
                text-xl
                text-black
           `}
      >
        {getFormattedDate(promotedEvent.date)}
      </p>
      <PrimaryButton
        className={`
          mt-4
        `}
        onClick={() => router.push("purchase")}
      >
        Purchase Tickets
      </PrimaryButton>
    </div>
  );
};

export default Home;
App.tsx just has session provider 
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { type AppType } from "next/app";

import { api } from "../utils/api";

import Layout from "../components/layout";
import "../styles/globals.css";

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { type AppType } from "next/app";

import { api } from "../utils/api";

import Layout from "../components/layout";
import "../styles/globals.css";

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);
And this custom layout component
James Perkins
James Perkins•2y ago
{promotedEvent.name} this is null.
BigLung
BigLungOP•2y ago
I don't think so but let me add an explicit check Why would that work at runtime but not build time weird let me try lol @James Perkins you rock, how do I setup vscode to display that linter error? Or do some of these things only get caught at build time
James Perkins
James Perkins•2y ago
Well the const promotedEvent = useEventStore((state) => state.promotedEvent); Should have some typings to catch things where it could be state| null | undefined that would allow you to identifier them during development. It works at run time because your state has state.

Did you find this page helpful?