将 NextJS 部署到 Vercel 失败
Deploying NextJS to Vercel failed
我正在尝试将应用程序部署到 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 时,我收到了上述错误消息。你能告诉我如何解决吗?
无法解析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 文件用于module augmentation.
在本地,我也使用 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;
};
}
}
- 删除
node_modules
和运行yarn install
。
- 然后
yarn build
.
- 如果您使用
npm
,则使用 npm i
和 npm run build
而不是 yarn install
和 yarn build
。
- 然后部署
有时 Vercel 在本地执行我的代码 运行(npm 运行 dev) 但在之后失败上传。当我使用 Github 自动部署时会发生这种情况,即我直接推送到我的 Github 存储库,然后 Vercel 自动构建和更新。
但是,使用 Vercel CLI 解决了我的问题。 运行 vercel 预览然后 vercel --prod 用于生产部署
检查 .vercelignore file 是否缺少 folders/files。
就我而言,我包含了文件夹但忘记了。
还要仔细检查哪些源文件已同步到 Vercel,在项目部署下,源选项卡。
我正在尝试将应用程序部署到 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 时,我收到了上述错误消息。你能告诉我如何解决吗?
无法解析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 文件用于module augmentation.
在本地,我也使用 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;
};
}
}
- 删除
node_modules
和运行yarn install
。 - 然后
yarn build
. - 如果您使用
npm
,则使用npm i
和npm run build
而不是yarn install
和yarn build
。 - 然后部署
有时 Vercel 在本地执行我的代码 运行(npm 运行 dev) 但在之后失败上传。当我使用 Github 自动部署时会发生这种情况,即我直接推送到我的 Github 存储库,然后 Vercel 自动构建和更新。
但是,使用 Vercel CLI 解决了我的问题。 运行 vercel 预览然后 vercel --prod 用于生产部署
检查 .vercelignore file 是否缺少 folders/files。 就我而言,我包含了文件夹但忘记了。 还要仔细检查哪些源文件已同步到 Vercel,在项目部署下,源选项卡。