英文:
Deployment issue with Next.js 13 app on Vercel - "Cannot find module" error
问题
I'm sorry for any confusion, but it seems you'd like a Chinese translation of the provided content. Here's the translated text:
我在使用Vercel部署我的Next.js 13应用程序时遇到了问题。我试图将Next的Parallel Routes功能添加到我的应用程序中。当我将代码推送到我的应用程序的GitHub存储库以创建新的拉取请求时,Vercel部署分支成功完成,但我遇到了500错误。在检查Vercel日志时,我找到了以下错误消息:
似乎在部署过程中找不到所需的模块/var/task/.next/server/app/@landing/page.js
。
这是@landing文件夹中的page.jsx
文件的内容:
这是layout.jsx
文件的内容:
这是我的next.config.js
文件:
关于我的设置,以下是一些附加细节:
Next.js版本:13.12.4
部署平台:Vercel
存储库:GitHub
我已经尝试过以下操作:
- 从Vercel重新部署分支。
- 确保本地构建过程没有任何错误。
- 确保所需的依赖项已正确安装。
- 确保应用程序在本地运行正常。
对于如何解决这个问题,我将非常感激任何见解或建议。提前感谢您的帮助!
英文:
I'm facing a deployment issue with my Next.js 13 app on Vercel. I was trying to add the Parallel Routes feature of Next to my application. When I push the code to make a new pull request on my application's GitHub repository, the Vercel deployment of my branch completes successfully, but I encounter a 500 error. Upon 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 /var/task/.next/server/app/@landing/page.js
cannot be found during the deployment process.
This is the content of the page.jsx
file inside of 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 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>
);
}
Here 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 have already tried the following:
- Redeploying the branch from Vercel.
- Verify that the build process completes without any errors locally.
- Ensure that the necessary dependencies are installed correctly.
- Verify that the application can run and works well locally.
I would greatly appreciate any insights or suggestions on how to resolve this issue. Thank you in advance for your help!
答案1
得分: 1
这可能是因为你正在使用“export default”,而建议使用下一个文档推荐的方式。
在他们的文档中,建议这样导出:
export default function Page(){
return (
...
)
}
英文:
That's maybe because you are using an export default instead use the next docs recommended.
In their pages recommend export like :
export default function Page(){
return (
...
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论