Next.js 13 app deployment issue on Vercel - "Module not found" error

Question

I'm having deployment issues with my Next.js 13 application on Vercel. I'm trying to add Next's parallel routing functionality to my application. When I push code to make a new pull request on the app's GitHub repository, the Vercel deployment of my branch completes successfully but I encounter a 500 error. After checking the Vercel logs, I found the following error message:

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

It seems that the required module cannot be found during the deployment process/var/task/.next/server/app/@landing/page.js.

This is the content of the page.jsx file in the @landing folder:

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;

This is the content of the layout.jsx file:

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

This is my next.config.js file:

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

module.exports = nextConfig;

Here are some additional details about my setup:

Next.js Version: 13.12.4 Deployment platform: Vercel Repository: GitHub

I've tried the following:

1. Redeploy the branch from Vercel.
2. Verify that the build process completed locally without any errors.
3. Make sure the necessary dependencies are installed correctly.
4. Verify that the application can be run locally and is functioning properly.

I would be grateful if you could provide any insight or suggestions on how to resolve this issue. Thanks in advance for your help!

Answer 1

This may be because you are using the export default instead of using the recommended next document.

The recommended exports on their page are as follows:

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