将NextJS部署到Vercel失败

zrfyljdw  于 8个月前  发布在  其他
关注(0)|答案(6)|浏览(84)

我尝试将应用程序部署到Vercel,在构建时出现此错误

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

字符串
一切似乎都在本地工作正常,但当我尝试将其部署到Vercel时,我得到了上面的错误消息。你能告诉我如何修复它吗?

krugob8w

krugob8w1#

有时候Vercel会让我的代码在本地运行(*npm run dev *),但在上传后失败。这种情况发生在我使用Github自动部署时,即我直接推送到我的Github repo,然后Vercel自动构建和更新。
但是,使用Vercel CLI解决了我的问题。运行 vercel 进行预览,然后运行 vercel --prod 进行生产部署

wpx232ag

wpx232ag2#

  • 删除node_modules并运行yarn install
  • 然后执行yarn build
  • 如果使用npm,则执行npm inpm run build,而不是yarn installyarn build
  • 然后部署
nafvub8i

nafvub8i3#

无法解析next-auth/client

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

字符串
确保next-auth正确安装为依赖项,而不是dev依赖项。同时升级您的react版本,它会抛出一个警告,说明它不是17.01或更高版本。如果您使用的是typescript,请尝试通过next-auth命名空间进行模块扩展,如typescript命名空间文档中所示。例如,一个@/types/next.d.ts文件和一个@/types/next-auth.d.ts文件用于模块扩充。
在本地,我也使用nextauth,在@/types/next.d.ts文件中有以下内容:

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


至于我的@/types/next-auth.d.ts文件的内容,它是一个自定义的headless wordpress auth流程,但是你可以自定义会话/用户界面,不管你是否使用自定义方法

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

luaexgnf

luaexgnf4#

检查.vercelignore文件中是否有你丢失的文件夹/文件。在我的例子中,我已经包括了文件夹,但忘记了。还要仔细检查哪些源文件同步到了vercel,在项目部署下,源选项卡。

o8x7eapl

o8x7eapl5#

尝试一次。在最后当系统问你要你改变任何设置类型是的。然后点击第一个构建和完成。这对我来说很有效。

qoefvg9y

qoefvg9y6#

我终于找到了一个解决方案,下一个js应用路由器。通过设置它为“force-no-store”类似于getStaticProps()im页面。
这将修复尝试构建应用程序时的问题。否则,您将得到一个伪装者错误。这部分代码是您试图从API路由获取数据的地方。就像localhost:3000/API/blog在我的情况下。

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

字符串
Next js docs-Route Segment Config

相关问题