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:
I would be grateful if you could provide any insight or suggestions on how to resolve this issue. Thanks in advance for your help!
P粉0630399902023-12-28 00:19:20
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 ( ... ) }