Failing to Compile in Prod

schwig2 months ago

13

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

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)
}

• 

  seanzubrickas

  2 months ago

  I am determined to help you sort this out!

  
  
  

  Did you build locally before deploying?

  
  
  

  and what version of payload is your project running?

• 

  schwig2 months ago

  I have not tried deploying locally, yet.

  
  

  Payload version is 3.79.0

  
  
  

  pnpm build

  returns the same error locally

• 

  seanzubrickas

  2 months ago

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

• 

  schwig2 months ago

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

• 

  seanzubrickas

  2 months ago

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

• 

  rubixvi2 months ago

  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.

• 

  seanzubrickas

  2 months ago

  well if it was started before this PR went out, this is likely the culprit!

  
  
  https://github.com/payloadcms/payload/pull/13521/changes
  
  

  HEY LOOK WHO IT IS

  
  
  

  😂

• 

  rubixvi2 months ago

  😂 😂 Thought I recognised the issue 😂

• 

  schwig2 months ago

  9 months ago, I believe. So, definitely an older template.

  
  
  

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

• 

  seanzubrickas

  2 months ago

  simple fix then, that is probably it!

  
  
  

  Let me know how that works out

• 

  schwig2 months ago

  Will do

  
  
  

  Ok, Deployment passed but no styling. 🫠

• 

  seanzubrickas

  2 months ago

  well we're getting somewhere

  
  
  

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

• 

  schwig2 months ago

  500: Internal Server error on an image. This is "Preview" not "Production" so it looks like it's trying to use the Vercel url instead of my domain for finding the image for some reason

  
  
  

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

  
  
  

  I'm not sure what happened, but I'm now getting the following error when trying to build the site. Nothing's changed besides the release and I'm getting this error when trying to run locally. I've tried

  pnpm reinstall

  and manually deleting

  .next

  and

  node_modules

  :

  
  
  

  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]

  
  
  @364562745447940099

  @187775044921982976

  Thank you both for your help. I ended up generating a new template and using it to update my site. Once I got all my environment vars in place, it pulled everything and deployed without a hitch.