Isu penggunaan apl Next.js 13 pada Vercel - ralat "Modul tidak ditemui".

Question

Saya menghadapi masalah penggunaan dengan apl Next.js 13 saya di Vercel. Saya cuba menambah fungsi penghalaan selari Next pada aplikasi saya. Apabila saya menolak kod untuk membuat permintaan tarik baharu pada repositori GitHub apl, penggunaan Vercel cawangan saya berjaya diselesaikan tetapi saya menghadapi ralat 500. Selepas menyemak log Vercel, saya menemui mesej ralat berikut:

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

Nampaknya modul yang diperlukan tidak dapat ditemui semasa proses penempatan/var/task/.next/server/app/@landing/page.js.

Ini ialah kandungan page.jsx fail di dalam folder @landing:

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;

Ini ialah kandungan layout.jsx fail:

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

Ini ialah fail next.config.js saya:

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

module.exports = nextConfig;

Berikut ialah beberapa butiran tambahan tentang persediaan saya:

Versi Next.js: 13.12.4 Platform penggunaan: Vercel Repositori: GitHub

Saya telah mencuba perkara berikut:

1. Tugas semula cawangan dari Vercel.
2. Sahkan bahawa proses binaan selesai secara setempat tanpa sebarang ralat.
3. Pastikan kebergantungan yang diperlukan dipasang dengan betul.
4. Sahkan bahawa aplikasi berjalan secara setempat dan berfungsi dengan baik.

Saya akan berterima kasih jika anda boleh memberikan sebarang pandangan atau cadangan tentang cara menyelesaikan isu ini. Terima kasih terlebih dahulu atas bantuan anda!

Answer 1

Ini mungkin kerana anda menggunakan lalai eksport dan bukannya menggunakan dokumen seterusnya yang disyorkan.

Eksport yang disyorkan dalam halaman mereka adalah seperti berikut:

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