logo标签列表

将NextJS部署到Vercel失败。

next.jsvercelnext-auth
4

我正在尝试将应用程序部署到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 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

在本地一切似乎都运作正常，但是当我尝试将其部署到Vercel时，出现了上述错误信息。您能告诉我如何解决吗？

6个回答
4
有时候，当我在本地运行代码（npm run dev）后上传到Vercel时，它会出现异常。这种情况通常发生在使用Github自动部署时，也就是我直接将代码推送到Github仓库，然后Vercel自动构建和更新。
不过，使用Vercel CLI可以解决我的问题。运行vercel进行预览，然后使用vercel --prod进行生产环境的部署。
2
很好的提示，您还可以运行 vercel dev 在生产环境中本地测试您的 API 路由。您的代码库仍处于开发状态，但 pages/api/* 路由则表现得像在生产环境中一样（测试功能）。如果需要使用特定端口，请使用vercel dev --listen 5005 （或任何其他端口，而不是默认的 3000 端口）。 - Andrew Ross
3
  • 删除 node_modules 文件夹并运行 yarn install 命令。
  • 然后执行 yarn build 命令。
  • 如果您使用的是 npm，则应该执行 npm i 和 npm run build 命令，而不是 yarn install 和 yarn build 命令。
  • 最后部署应用程序。
2

它无法解决 next-auth/client

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

请确保将next-auth正确安装为依赖项而不是开发依赖项。此外，请升级您的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文件内容，它是用于自定义无头WordPress认证流程的，但您可以自定义Session/User接口，无论您是否使用自定义方法。
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;
        };
    }
}
1
这是一个很棒的答案，干得好！ - leerob
0
试一次。在最后，当系统询问是否要更改任何设置时，输入“是”。然后点击第一个选项“构建”并完成。这对我有效。
0

检查.vercelignore文件以查看您缺少的文件夹/文件。 在我的情况下，我已经包含了文件夹但是忘记了一些文件。 还要仔细检查同步到Vercel的源文件，在项目部署、源选项卡下。

0
我终于找到了一个解决方案，适用于Next.js应用程序路由器。将其设置为“force-no-store”类似于在页面中使用getStaticProps()。
这将修复构建应用程序时出现的问题。否则，您将遇到一个假装错误。 这段代码是您尝试从API路由获取数据的地方。在我的情况下，例如localhost:3000/api/blog。
export const dynamic = "force-dynamic";
export const fetchCache = "force-no-store";

Next js文档-路由段配置

感谢您为Stack Overflow社区做出的贡献。这可能是一个正确的答案，但如果您能提供代码的额外解释，让开发人员能够理解您的推理过程，那将非常有帮助。对于不太熟悉语法或难以理解概念的新开发人员来说，这尤其有用。您是否可以编辑您的答案，以包含额外的细节，以造福社区？ - undefined
请进一步解释。这个放在哪里，它如何帮助？有在线文档吗？ - undefined
我在这里找到了文档。我强烈建议在第二行中使用revalidate = 0，因为不建议覆盖fetchCache。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接