Next.js 13应用在Vercel上部署问题 - "找不到模块"错误
我的 Next.js 13 应用程序在 Vercel 上遇到部署问题。我试图将 Next 的并行路由功能添加到我的应用程序中。当我推送代码以在应用程序的 GitHub 存储库上发出新的拉取请求时，我的分支的 Vercel 部署成功完成，但遇到 500 错误。检查 Vercel 日志后，我发现以下错误消息：
Error: Cannot find module '/var/task/.next/server/app/@landing/page.js'
Require stack:
- /var/task/node_modules/next/dist/server/require.js
- /var/task/node_modules/next/dist/server/next-server.js
- /var/task/___next_launcher.cjs
at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
at mod._resolveFilename (/var/task/node_modules/next/dist/build/webpack/require-hook.js:23:32)
at Module._load (node:internal/modules/cjs/loader:920:27)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object.requirePage (/var/task/node_modules/next/dist/server/require.js:88:12)
at /var/task/node_modules/next/dist/server/load-components.js:49:73
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.loadComponentsImpl [as loadComponents] (/var/task/node_modules/next/dist/server/load-components.js:49:26)
at async NextNodeServer.findPageComponentsImpl (/var/task/node_modules/next/dist/server/next-server.js:600:36) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/var/task/node_modules/next/dist/server/require.js',
'/var/task/node_modules/next/dist/server/next-server.js',
'/var/task/___next_launcher.cjs'
],
page: '/'
}
RequestId: 74d89b96-1db2-4832-a673-a834c04d20ba Error: Runtime exited with error: exit status 1
Runtime.ExitError
部署过程中似乎找不到需要的模块/var/task/.next/server/app/@landing/page.js。
这是 @landing 文件夹内 page.jsx 文件的内容：
import Link from 'next/link';
import Button from '@/components/Button';
import NavbarIcon from '@/components/NavbarIcons';
const LandingPage = () => {
return (
<main className="w-screen flex flex-col scrollbar-hide bg-white">
<header className="w-full px-6 py-2 flex items-center drop-shadow-md">
<nav className="w-full flex items-center">
<ul className="w-full flex justify-between items-center drop-shadow-md">
<li>
<Link href={'/'}>
<NavbarIcon icon='logo' />
</Link>
</li>
<li>
<ul className='flex gap-4'>
<li>
<Link href={'/auth/login'}>
<Button bgColor="primary" isSolid={true}>
Iniciar Sesión
</Button>
</Link>
</li>
<li>
<Link href={'/auth/register'}>
<Button bgColor="primary" isSolid={false}>
Crear Cuenta
</Button>
</Link>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<article className="w-full h-screen"></article>
<article className="w-full h-screen"></article>
<article className="w-full h-screen"></article>
<article className="w-full h-screen"></article>
</main>
);
};
export default LandingPage;
这是layout.jsx文件的内容：
import './globals.css';
import { cookies } from 'next/headers';
import Providers from './ReduxContext/provider';
import Navbar from '@/components/Navbar';
export const metadata = {
title: 'Schedulo',
description: 'Improve the way to contact services in our city.',
};
export default function RootLayout({ children, landing }) {
//One way to handle session data is with next 'cookies' function, which use is similar to 'document.coockie'
//We can choice to use other methods mor specific in future to handle users and auths, like firebase hooks.
const coockieList = cookies();
return (
<html>
<head />
<body>
<Providers>
<>
{coockieList.has('userToken') ? (
<main className="relative w-screen max-w-[100vw] h-screen md:h-fit bg-white flex flex-col-reverse md:flex-row">
<Navbar />
{children}
</main>
) : (
landing
)}
</>
</Providers>
</body>
</html>
);
}
这是我的 next.config.js 文件：
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
appDir: true,
},
};
module.exports = nextConfig;
以下是有关我的设置的一些其他详细信息：
Next.js 版本：13.12.4 部署平台：Vercel 存储库：GitHub
我已经尝试过以下操作：
- 从 Vercel 重新部署分支。
- 验证构建过程是否在本地完成且没有任何错误。
- 确保正确安装必要的依赖项。
- 验证应用程序是否可以在本地运行并正常运行。
如果您能提供有关如何解决此问题的见解或建议，我将不胜感激。预先感谢您的帮助！
