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 moodflics@0.1.0 No repository field.
14:14:23.676    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
14:14:23.677    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: 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    > moodflics@0.1.0 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! moodflics@0.1.0 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 moodflics@0.1.0 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?

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

• 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

Answer 6

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