Deploying NextJS to Vercel failed

Question

I am trying to deploy an app to Vercel, and getting this error at build

14:13:58.168    Cloning github.com/ChrisB007/moodflics (Branch: main, Commit: 7a2acfe)
14:13:58.575    Cloning completed: 406.06ms
14:13:58.624    Analyzing source code...
14:13:59.946    Installing build runtime...
14:14:03.139    Build runtime installed: 3.193s
14:14:07.055    Build cache not provided
14:14:08.517    Installing dependencies...
14:14:09.142    npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!
14:14:23.664    npm WARN [email protected] No repository field.
14:14:23.676    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
14:14:23.677    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
14:14:23.681    added 387 packages from 281 contributors in 14.582s
14:14:23.836    62 packages are looking for funding
14:14:23.836      run `npm fund` for details
14:14:23.861    Detected Next.js version: 10.2.0
14:14:23.864    Running "npm run build"
14:14:24.144    > [email protected] build /vercel/path0
14:14:24.144    > next build
14:14:24.557    warn  - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://nextjs.org/docs/messages/react-version
14:14:24.912    info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
14:14:25.052    info  - Checking validity of types...
14:14:25.068    Attention: Next.js now collects completely anonymous telemetry regarding usage.
14:14:25.068    This information is used to shape Next.js' roadmap and prioritize features.
14:14:25.068    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:
14:14:25.068    https://nextjs.org/telemetry
14:14:25.123    info  - Creating an optimized production build...
14:14:29.905    Failed to compile.
14:14:29.906    ModuleNotFoundError: Module not found: Error: Can't resolve 'next-auth/client' in '/vercel/path0/pages'
14:14:29.906    > Build error occurred
14:14:29.907    Error: > Build failed because of webpack errors
14:14:29.907        at /vercel/path0/node_modules/next/dist/build/index.js:17:924
14:14:29.907        at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
14:14:29.946    npm ERR! code ELIFECYCLE
14:14:29.947    npm ERR! errno 1
14:14:29.951    npm ERR! [email protected] build: `next build`
14:14:29.951    npm ERR! Exit status 1
14:14:29.951    npm ERR! 
14:14:29.951    npm ERR! Failed at the [email protected] build script.
14:14:29.951    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
14:14:29.959    npm ERR! A complete log of this run can be found in:
14:14:29.959    npm ERR!     /vercel/.npm/_logs/2021-05-10T18_14_29_952Z-debug.log
14:14:29.972    Error: Command "npm run build" exited with 1

Everything seems to be working fine locally, but when I tried deploying it to Vercel I got the above error message. Can you tell me how to fix it?

Libya

Answer 1

• Delete node_modules and run yarn install.
• Then do yarn build.
• If you use npm then do npm i and npm run build instead of yarn install and yarn build.
• Then deploy

Elah

Answer 2

Sometimes Vercel acts wired that my codes run locally(npm run dev) but fail after upload. This happens when I use Github automatic deployment, i.e. I directly push to my Github repo then Vercel automatically build and update.

However, using Vercel CLI solved my problem. run vercel for preview then vercel --prod for deployment in production

Theology

great tips, you can also run vercel dev to locally test your api routes in a production environment. Your codebase remains in development sans the pages/api/* routes. They behave as if they're in production (beta feature). If a specific port is desirable use vercel dev --listen 5005 (or any PORT other than 3000 which is the default) – Songsongbird

Answer 3

It can't resolve next-auth/client

ModuleNotFoundError: Module not found: Error: Can't resolve 'next-auth/client' in '/vercel/path0/pages'

Ensure that next-auth is properly installed as a dependency and not a dev dependency. Also upgrade your version of react, it's throwing a warning about it not being 17.01 or higher. If you are using typescript, try module augmentation via the next-auth namespace as indicated in their documentation for typescript namespaces. For example, an @/types/next.d.ts file and an @/types/next-auth.d.ts file for module augmentation.

Locally, I use nextauth as well, and have the following in my @/types/next.d.ts file:

import type { NextComponentType, NextPageContext } from 'next';
import type { Session } from 'next-auth';
import type { Router } from 'next/router';

declare module 'next/app' {
    type AppProps<P = Record<string, unknown>> = {
        Component: NextComponentType<NextPageContext, any, P>;
        router: Router;
        __N_SSG?: boolean;
        __N_SSP?: boolean;
        pageProps: P & {
            /** Initial session passed in from getServerSideProps or getInitialProps */
            session?: Session;
        };
    };
}

As for the contents of my @/types/next-auth.d.ts file, it's for a custom headless wordpress auth flow, but you can customize the Session/User interfaces regardless of whether you're using a custom approach or not

import NextAuth, { User } from 'next-auth';
import { JWT } from 'next-auth/jwt';
import { WordpressUserPartialFragment } from '../graphql/generated/graphql';
declare module 'next-auth' {
    interface Session extends WordpressUserPartialFragment {
        response: {
            accessToken: string;
            id: string;
            avatar: {
                url: string;
            };
            description: string | null;
            slug: string;
            username: string;
            email: string;
            firstName: string;
            lastName: string;
            token_exp: string;
            refresh_token: string;
            locale: string;
        };
    }
}

Songsongbird

This is a great answer, nice job! – Catalase

Answer 4

Check .vercelignore file for folders/files you are missing. In my case, I have included folder and forgot. Also double check what source files got synced to vercel, under project deployments, source tab.

Vinegar

Answer 5

Try this once. At the last when system ask do you want yo change any settings types yes. Then click on first one build and done. This works for me.

Harmonist

Answer 6

I finally found a solution for this, for next js app router. By setting it to “force-no-store” is similar to getStaticProps() im pages.

This will fix the issue when trying to build the app. Otherwise you will get an pretender error. This part of code is places where you are trying to fetch data from api route. Like localhost:3000/api/blog in my case.

export const dynamic = "force-dynamic";
export const fetchCache = "force-no-store";

Next js docs-Route Segment Config

Tolbooth

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Heretical

Please explain further. Where do you put this, and how does it help? Is there any online documentation? – Superstitious

I found the documentation here. I would highly recommend using revalidate = 0 in the second line since fetchCache is not recommended to override. – Superstitious