Deployment issue with Next.js 13 app on Vercel – "Cannot find module" error

huangapple go评论70阅读模式
英文:

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

我已经尝试过以下操作:

  1. 从Vercel重新部署分支。
  2. 确保本地构建过程没有任何错误。
  3. 确保所需的依赖项已正确安装。
  4. 确保应用程序在本地运行正常。

对于如何解决这个问题,我将非常感激任何见解或建议。提前感谢您的帮助!

英文:

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:

  1. Redeploying the branch from Vercel.
  2. Verify that the build process completes without any errors locally.
  3. Ensure that the necessary dependencies are installed correctly.
  4. 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 (
  ...
)
}

huangapple
  • 本文由 发表于 2023年5月7日 04:44:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76191053.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定