Problem bei der Next.js 13-App-Bereitstellung auf Vercel – Fehler „Modul nicht gefunden“.

Question

Ich habe Probleme bei der Bereitstellung meiner Next.js 13-App auf Vercel. Ich versuche, die parallele Routing-Funktionalität von Next zu meiner Anwendung hinzuzufügen. Wenn ich Code pushe, um eine neue Pull-Anfrage im GitHub-Repository der App zu stellen, wird die Vercel-Bereitstellung meines Zweigs erfolgreich abgeschlossen, es tritt jedoch ein 500-Fehler auf. Nachdem ich die Vercel-Protokolle überprüft hatte, fand ich die folgende Fehlermeldung:

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

Es scheint, dass das erforderliche Modul während des Bereitstellungsprozesses nicht gefunden werden kann/var/task/.next/server/app/@landing/page.js.

Dies ist der Inhalt der page.jsx-Datei im @landing-Ordner:

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;

Dies ist der Inhalt der layout.jsx-Datei:

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

Das ist meine next.config.js Datei:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

Hier sind einige zusätzliche Details zu meinem Setup:

Next.js-Version: 13.12.4 Bereitstellungsplattform: Vercel Repository: GitHub

Ich habe Folgendes versucht:

1. Stellen Sie Filialen von Vercel erneut bereit.
2. Stellen Sie sicher, dass der Build-Prozess lokal ohne Fehler abgeschlossen wird.
3. Stellen Sie sicher, dass die erforderlichen Abhängigkeiten korrekt installiert sind.
4. Stellen Sie sicher, dass die Anwendung lokal ausgeführt wird und ordnungsgemäß funktioniert.

Ich wäre Ihnen dankbar, wenn Sie mir Einblicke oder Vorschläge zur Lösung dieses Problems geben könnten. Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

这可能是因为您使用的是导出默认值，而不是使用推荐的下一个文档。

在他们的页面中推荐导出如下：

export default function Page(){
  return (
  ...
)
}