#Failing to Compile in Prod

29 messages · Page 1 of 1 (latest)

rugged patio
#

Hello, I'm currently receiving the following error when trying to deploy my project to Vercel. I can't seem to find anything on my specific error.

Type error: Type 'typeof import("/vercel/path0/src/app/(frontend)/next/preview/route")' does not satisfy the constraint 'RouteHandlerConfig<"/next/preview">'.
  Types of property 'GET' are incompatible.
    Type '(req: { cookies: { get: (name: string) => { value: string; }; }; } & Request) => Promise<Response>' is not assignable to type '(request: NextRequest, context: { params: Promise<{}>; }) => void | Response | Promise<void | Response>'.
      Types of parameters 'req' and 'request' are incompatible.
        Type 'NextRequest' is not assignable to type '{ cookies: { get: (name: string) => { value: string; }; }; } & Request'.
          Type 'NextRequest' is not assignable to type '{ cookies: { get: (name: string) => { value: string; }; }; }'.
            The types returned by 'cookies.get(...)' are incompatible between these types.
              Type 'RequestCookie | undefined' is not assignable to type '{ value: string; }'.
                Type 'undefined' is not assignable to type '{ value: string; }'.
Next.js build worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1
pallid starBOT
rugged patio
#

I believe this is due to my project template being slightly out of date and something being wrong in my preview/route.ts file.

import type { CollectionSlug, PayloadRequest } from 'payload'
import { getPayload } from 'payload'

import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'

import configPromise from '@payload-config'

export async function GET(
  req: {
    cookies: {
      get: (name: string) => {
        value: string
      }
    }
  } & Request,
): Promise<Response> {
  const payload = await getPayload({ config: configPromise })

  const { searchParams } = new URL(req.url)

  const path = searchParams.get('path')
  const collection = searchParams.get('collection') as CollectionSlug
  const slug = searchParams.get('slug')
  const previewSecret = searchParams.get('previewSecret')

  if (previewSecret !== process.env.PREVIEW_SECRET) {
    return new Response('You are not allowed to preview this page', { status: 403 })
  }

  if (!path || !collection || !slug) {
    return new Response('Insufficient search params', { status: 404 })
  }

  if (!path.startsWith('/')) {
    return new Response('This endpoint can only be used for relative previews', { status: 500 })
  }

  let user

  try {
    user = await payload.auth({
      req: req as unknown as PayloadRequest,
      headers: req.headers,
    })
  } catch (error) {
    payload.logger.error({ err: error }, 'Error verifying token for live preview')
    return new Response('You are not allowed to preview this page', { status: 403 })
  }

  const draft = await draftMode()

  if (!user) {
    draft.disable()
    return new Response('You are not allowed to preview this page', { status: 403 })
  }

  // You can add additional checks here to see if the user is allowed to preview this page

  draft.enable()

  redirect(path)
}
sharp wren
#

I am determined to help you sort this out!

#

Did you build locally before deploying?

#

and what version of payload is your project running?

rugged patio
#

I have not tried deploying locally, yet.
Payload version is 3.79.0

#

pnpm build returns the same error locally

sharp wren
#

that tracks, and is good because it means it's not some silly vercel hosting thing

rugged patio
#

My gut tells me it might be an async issue somewhere in the Promise but I just can't see it.

sharp wren
#

When did you start the project? Just trying to determine if you might have an older version of the template

steady grotto
#

I think I fixed this last year sometime, it was when next updated their cookies I believe, best to open up the template and copy the new changes.

sharp wren
#

HEY LOOK WHO IT IS

#

😂

steady grotto
#

😂 😂 Thought I recognised the issue 😂

rugged patio
#

I'll go look at the PR and Template in a bit for the Next changes

sharp wren
#

simple fix then, that is probably it!

#

Let me know how that works out

rugged patio
#

Will do

rugged patio
sharp wren
#

well we're getting somewhere

#

can you right click and inspect and show me your console?

rugged patio
#

I thikn it might be the logic in "getMediaUrl" so it might fix itself if I merge to Prod

rugged patio
# 
Error evaluating Node.js code
Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
    [at at (/run/media/schwig/Storage/WebstormProjects/payload-website-template/node_modules/.pnpm/tailwindcss@4.2.2/node_modules/tailwindcss/dist/lib.js:38:1643)]
    [at <anonymous> (turbopack:///[turbopack-node]/transforms/postcss.ts:56:14)]
    [at <anonymous>]
    [at Module.init (turbopack:///[turbopack-node]/transforms/postcss.ts:43:33)]
    [at run (turbopack:///[turbopack-node]/child_process/evaluate.ts:74:20)]
    [at process.processTicksAndRejections (node:internal/process/task_queues:103:5)]

Import trace:
  Client Component Browser:
    ./node_modules/.pnpm/@payloadcms+ui@3.79.1_@types+react@19.2.6_monaco-editor@0.55.1_next@16.2.0_@babel+core@_c93a27049e95a9f1759089f60beee474/node_modules/@payloadcms/ui/dist/icons/Copy/index.scss.css [Client Component Browser]
    ./node_modules/.pnpm/@payloadcms+ui@3.79.1_@types+react@19.2.6_monaco-editor@0.55.1_next@16.2.0_@babel+core@_c93a27049e95a9f1759089f60beee474/node_modules/@payloadcms/ui/dist/icons/Copy/index.js [Client Component Browser]
    ./src/blocks/Code/CopyButton.tsx [Client Component Browser]
    ./src/blocks/Code/Component.client.tsx [Client Component Browser]
    ./src/blocks/Code/Component.tsx [Client Component Browser]
    ./src/components/RichText/index.tsx [Client Component Browser]
    ./src/blocks/Form/Component.tsx [Client Component Browser]
    ./src/blocks/Form/Component.tsx [Server Component]
    ./src/blocks/RenderBlocks.tsx [Server Component]
    ./src/app/(frontend)/[slug]/page.tsx [Server Component]
    ./src/app/(frontend)/page.tsx [Server Component]
pallid starBOT