Help, vercel does not build

Help
1

hello,
this is a really strange issue that I have and is 100% related to vercel.
basically, vercel doesnt want to build my website at all and is giving random type errors that are not showing on my pc, it’s like the wrong version of nextjs (since this is what my app uses) is used.

I tried everything, and I mean it, even tried to redeploy an old version that always worked and it also failed! with no code change the build failed, which is what makes it so weird

I doubt my config is needed here because as I said even when I don’t change anything and I redeploy an old version (that I repeat myself: always worked) it still errors out, just really tried to fix a typo and it resulted with a whole day of debugging

additionally, I do not have vercel.json and all config is automatically set by vercel, so I probably did nothing wrong.
on my local pc I tried to build the way possibly vercel does it, which is put it in a container and install + build everything from scratch with no caching, and it went alright.

also, I tried to fix the errors but it never ended, so after like 5 fixes I gave up since I really don’t want to waste my build hours
examples of errors include:

Type error: Module '"react-dom"' has no exported member 'useFormStatus'.
  3 | import { Button } from "@/components/ui/button";
  4 | import { Loader2 } from "lucide-react";
> 5 | import { useFormStatus } from "react-dom";
    |          ^
  6 |
  7 | export default function SubmitButton({ disabled, text }: { disabled?: boolean; text?: string }) {
  8 |     const { pending } = useFormStatus();

Type error: Type '(formData: any) => Promise<void>' is not assignable to type 'string'.
  21 |             <Form
  22 |                 className="rounded-lg flex flex-col sm:flex-row w-full"
> 23 |                 action={async (formData) => {
     |                 ^
  24 |                     try {
  25 |                         // check if the question is valid
  26 |                         const checkRes = await checkQuestion(formData.get("query") as string);
Error: Command "next build" exited with 1

… and more

so any help will be appreciated, thanks!

edit: additionally it’s worth adding that I’m currently facing Adsense review process and need to react quickly to any errors they found on my site, especially since the app I’m building is related to this season and every day I’m losing people and potentially money just because of a bug that I can’t fix at all (and wasn’t even started by me)
so tl;dr the longer I wait the bigger loss it is :smiling_face_with_tear:

edit2: just to be clear I tried to build without the “build cache”, changed the node version, updated the build command and a lots of others still with no good result

at the time of writing my app isn’t functional because of a bug I found that I can’t fix

2

Any updates? I really need this to work asap

3

Hi, @ksawery29! Welcome to the Vercel Community :smile:

I can understand how frustrating this is! Let’s try and debug together. FWIW, here are some potentially useful resources to debug build errors:

The errors you’re seeing suggest there might be a version mismatch or incompatibility. Can you access the full build logs in your Vercel dashboard? Look for any warnings or errors at the beginning of the build process that might provide more context .

Since even old, previously working versions are failing, it might be helpful to create a minimal reproduction of your project. This could help isolate whether the issue is with your code or Vercel’s build process.

Regarding the specific errors:

  1. The useFormStatus error suggests a version mismatch between your local environment and Vercel’s build environment. Double-check your package.json to ensure you’re using compatible versions of next, react, and react-dom.
  2. The form action error might be related to TypeScript configurations. Ensure your tsconfig.json is up-to-date and compatible with your Next.js version.

If these steps don’t resolve the issue, please provide more details about your project structure, package.json, and any next.config.js file you might have. This will help in providing more targeted advice.

4

Looking at your useFormStatus error again, it does seem like this is happening because useFormStatus is a newer React feature that requires the correct version of react-dom. Could you also try:

  1. Update your package.json to include the correct versions:
npm install react@latest react-dom@latest
  1. Make sure your package.json has these minimum versions:
{
  "dependencies": {
    "next": "^15.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
  1. After updating the dependencies, clear your local node_modules and reinstall:
rm -rf node_modules
npm install
  1. Then try deploying again to Vercel.

If you’re still seeing issues after this, you can try forcing a fresh deployment without cache.

5

Thanks for the reply!
The vercel GitHub integration automatically deploys it, and I have node_modules in .gitignore so they are not being uploaded with it.
For the react version, its the newest possible. I never changed it, just created a fresh project of nextjs15. Here are the dependencies:

"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106",
"next": "15.0.3",

I tried to run your command but with yarn (since this is what I use) like so: yarn add react@latest react-dom@latest and it removed the rc prefix from dependencies, which I guess became more stable? After deploying the updated version it still failed. Here are the full logs:

warning " > next@15.0.3" has incorrect peer dependency "react@^18.2.0 || 19.0.0-rc-66855b96-20241106".
warning " > next@15.0.3" has incorrect peer dependency "react-dom@^18.2.0 || 19.0.0-rc-66855b96-20241106".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 37.82s.
Detected Next.js version: 15.0.3
Running "next build --no-lint"
 ⚠ Linting is disabled.
   ▲ Next.js 15.0.3
   - Experiments (use with caution):
     · turbo
   Creating an optimized production build ...
 ✓ Compiled successfully
   Checking validity of types ...
Failed to compile.
./src/components/main/client-form.tsx:23:17
Type error: Type '(formData: any) => Promise<void>' is not assignable to type 'string'.
  21 |             <Form
  22 |                 className="rounded-lg flex flex-col sm:flex-row w-full"
> 23 |                 action={async (formData) => {
     |                 ^
  24 |                     try {
  25 |                         // check if the question is valid
  26 |                         const checkRes = await checkQuestion(formData.get("query") as string);
Error: Command "next build --no-lint" exited with 1

i disabled linting because I thought it will skip the error, it didn’t though. however after linting the project manually or removing this flag nothing changed and the lint passed successfully

So basically back to the same thing. As for the minimal example, if you create a new nextjs 15 project with the Form component should be really close the what my app actually is right now. Most of the things run on the backend.

Lastly, as I said I tried to already build my app in a container with a fresh install and it went normally suggesting it’s actually something with vercel.

Yes, I tried to re-deploy with no build cache.

image
image495×687 30.1 KB

6

I forgot about the next.config.ts. Here it is:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    /* config options here */
};

export default nextConfig;

const withMDX = require("@next/mdx")({
    extension: /\.mdx?$/,
});

module.exports = withMDX({
    pageExtensions: ["ts", "tsx", "md", "mdx"],
});

As said earlier it’s nothing special, it’s just a normal nextjs app with a blog page and a form added.

7

Bumping this thread.
As I said I need it to work asap, it’s been like 3 days already where I can’t push anything new to the app.
What should I do to fix it, or at least try to?

At least it would be nice if I were able to see all errors, however with only one at the time it would be an expensive fix for the free tier (since as mentioned on my local pc no error is shown).

Here are the build logs from local nextjs build:

$: npx vercel build
Vercel CLI 39.1.3
WARNING: You should not upload the `.next` directory.
Installing dependencies...
➤ YN0000: · Yarn 4.5.3
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 232ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0060: │ react is listed by your project with version 19.0.0 (p364fc), which doesn't satisfy what framer-motion and other dependencies request (but they have non-overlapping ranges!).
➤ YN0060: │ react-dom is listed by your project with version 19.0.0 (p24b36), which doesn't satisfy what framer-motion and other dependencies request (^18.2.0).
➤ YN0086: │ Some peer dependencies are incorrectly met by your project; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 756ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 301ms
➤ YN0000: · Done with warnings in 1s 445ms
Detected Next.js version: 15.0.3
Running "next build --no-lint"
 ⚠ Linting is disabled.
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

   ▲ Next.js 15.0.3
   - Environments: .env.local
   - Experiments (use with caution):
     · turbo

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (11/11)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

And actually linting the app:

$: npx next lint
✔ No ESLint warnings or errors

The same goes for type checking:

$: npx tsc --noEmit
$: npx tsc

// no output provided for both commands
8

I just did it and it deployed fine, suggesting something wrong with my app, however after copying all the config from the working example to my failing build it once again didnt change anything and its still failing
the minimal example I did had the exact version and similar code (without styling) to my failing app.

im lost now

9

ok final update:
it fixed by itself, probably yours extensive caching broke (once again)

glad its over though, 4 days of trying to debug was a pain, especially since it was not my fault.
part of the reason why it happened is also because of nexjts with its strange logging, probably if more was shown I would tinker with the configs quicker which just maybe would fix it

thanks for the help anyways

1 Like
10

Thanks for updating this, @ksawery29! :pray:

I’ll share this with the team to gather some feedback. Please reach back out if you have any more questions!

1 Like
11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.