Problème de déploiement de l'application Next.js 13 sur Vercel - Erreur "Module introuvable"

Question

Je rencontre des problèmes de déploiement avec mon application Next.js 13 sur Vercel. J'essaie d'ajouter la fonctionnalité de routage parallèle de Next à mon application. Lorsque je pousse du code pour faire une nouvelle pull request sur le référentiel GitHub de l'application, le déploiement Vercel de ma branche se termine avec succès mais je rencontre une erreur 500. Après avoir vérifié les logs Vercel, j'ai trouvé le message d'erreur suivant :

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

Il semble que le module requis soit introuvable pendant le processus de déploiement/var/task/.next/server/app/@landing/page.js.

Voici le contenu du fichier page.jsx dans le dossier @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;

Voici le contenu du fichier 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>
  );
}

Voici mon next.config.jsfichier :

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

module.exports = nextConfig;

Voici quelques détails supplémentaires sur ma configuration :

Version suivante.js : 13.12.4 Plateforme de déploiement : Vercel Dépôt : GitHub

J'ai essayé ce qui suit :

1. Redéployer les agences de Vercel.
2. Vérifiez que le processus de construction se termine localement sans aucune erreur.
3. Assurez-vous que les dépendances nécessaires sont correctement installées.
4. Vérifiez que l'application s'exécute localement et fonctionne correctement.

Je vous serais reconnaissant si vous pouviez nous fournir des informations ou des suggestions sur la façon de résoudre ce problème. Merci d'avance pour votre aide!

Answer 1

Cela peut être dû au fait que vous utilisez la valeur d'exportation par défaut au lieu d'utiliser le document suivant recommandé.

Les exports recommandés dans leur page sont les suivants :

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