Next.js 13应用在Vercel上部署问题 - "找不到模块"错误-PHP中文网问答

我的 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 重新部署分支。
验证构建过程是否在本地完成且没有任何错误。
确保正确安装必要的依赖项。
验证应用程序是否可以在本地运行并正常运行。

如果您能提供有关如何解决此问题的见解或建议，我将不胜感激。预先感谢您的帮助！