Blitz builds failing on Vercel

Nfinished commented 2 years ago

What is the problem?

As posted here: https://github.com/vercel/vercel/discussions/7185, Vercel builds are failing with error Build optimization failed: found pages without a React Component as default export. I'd create an issue in Vercel/nextjs but as this is a Blitz project I'd definitely get bounced back here.

Builds complete locally, but during Vercel deployments the above error occurs. Below is one of the relevant pages in its entirety, it's definitely default exporting a React component. Could this be due to some Blitz-specific step of the build process?

Paste all your error logs here:

(Vercel deployment logs)

> Build error occurred
--
12:31:24.978 | Error: Build optimization failed: found pages without a React Component as default export in
12:31:24.978 | pages/projects/[id]
12:31:24.978 | pages/projects
12:31:24.978 |  
12:31:24.978 | See https://nextjs.org/docs/messages/page-without-valid-component for more info.
12:31:24.980 |  
12:31:24.980 | at /vercel/path0/node_modules/next/dist/build/index.js:604:19
12:31:24.981 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20)
12:31:25.060 | error Command failed with exit code 1.

Paste all relevant code snippets here:

// app/pages/projects/index.tsx

import { BlitzPage, Head } from 'blitz'
import React, { Suspense } from 'react'

import AppLayout from 'app/core/layouts/AppLayout'
import ProjectTable from 'app/Projects/components/ProjectTable'

const ProjectsPage: BlitzPage = () => {
  return (
    <>
      <Head>
        <title>Projects</title>
      </Head>

      <Suspense fallback={<div>Loading...</div>}>
        <ProjectTable />
      </Suspense>
    </>
  )
}

ProjectsPage.suppressFirstRenderFlicker = true
ProjectsPage.authenticate = true
ProjectsPage.getLayout = (page) => <AppLayout>{page}</AppLayout>

export default ProjectsPage

What are detailed steps to reproduce this?

1.

Run `blitz -v` and paste the output here:

Linux 5.10 | linux-x64 | Node: v16.9.0

blitz: 0.44.4 (local)

  Package manager: yarn 
  System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 12.77 GB / 15.60 GB
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.9.0 - /tmp/yarn--1639462279966-0.25328662260217283/node
    Yarn: 1.22.15 - /tmp/yarn--1639462279966-0.25328662260217283/yarn
    npm: 7.21.1 - ~/.asdf/plugins/nodejs/shims/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: 3.6.0 => 3.6.0 
    blitz: 0.44.4 => 0.44.4 
    prisma: 3.6.0 => 3.6.0 
    react: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020 
    react-dom: 18.0.0-alpha-5ca4b0433-20211020 => 18.0.0-alpha-5ca4b0433-20211020 
    typescript: ~4.5.4 => 4.5.4

Please include below any other applicable logs and screenshots that show your problem:

No response

Nfinished commented 2 years ago

It appears to be a useMutation hook in a descendant causing the problem, Vercel won't build with this snippet.

const [createProjectMutation, { isLoading: isSubmitting }] = useMutation(
    createProject,
    {
      onSuccess: () => {
        onClose()
        invalidateQuery(getProjects)
      },
    }
  )

blakeley commented 2 years ago

@Nfinished How did you resolve the issue? Is there a resolution other than removing that snippet?

Nfinished commented 2 years ago

Turned out it was actually a project dependency that was doing something vercel didn't like. My issue was unrelated to blitz

eglove commented 2 years ago

What was the dependency? @Nfinished ? These issues show up in Google and I'm having the same problem. It's always good to explain what it was and how you fixed it.

Nfinished commented 2 years ago

https://www.npmjs.com/package/array-shuffle

eglove commented 2 years ago

I see, I actually had a similar issue with randomizing. The shuffle was happening server side, but on every render it was refetching. I had to set 'refetchOnMount: false' in the useQuery config. I went ahead and did that for all the refetch options.

siddharthsharma94 commented 2 years ago

this is definitely still an issue, and I ran into this while using nanoid in my mutation. I have 0 idea how that would be the reason for this error. Took almost 2 days to figure out. using uniqid instead of nanoId seems to have fixed the issue

blitz-js / legacy-framework