Next.js Discord

Discord Forum

[Error: An error occurred in the Server Components render.]

Answered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
New Guinea Freshwater CrocodileOP
How do I debug this? Local works fine but I seem to get this only in prod when I push to Vercel

[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '3836448909'
}
Answered by Ray
ok try this
import fs from 'fs/promises'
...
const files = await fs.readdir(toolsPath);
View full answer

44 Replies

New Guinea Freshwater CrocodileOP
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '3836448909'
}


Error: ENOENT: no such file or directory, scandir '/var/task/tools'
    at Object.readdirSync (node:fs:1525:3)
    at x (/var/task/.next/server/app/page.js:1:7980)
    at em (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:128334)
    at /var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:140034
    at Array.toJSON (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:143612)
    at stringify (<anonymous>)
    at eE (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131997)
    at eR (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132440)
    at Timeout._onTimeout (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:129220)
    at listOnTimeout (node:internal/timers:569:17) {
  errno: -2,
  syscall: 'scandir',
  code: 'ENOENT',
  path: '/var/task/tools'
}
@Ray
How do I debug the above?
@Ray are you trying to read file on that page?
New Guinea Freshwater CrocodileOP
yes
@New Guinea Freshwater Crocodile yes
Ray
could you show the code?
New Guinea Freshwater CrocodileOP
app/page.tsx
export { Home as default } from "@x/core/pages/home";


and in my @x/core package:


import fs from 'fs';
import path from 'path';
import { Suspense } from 'react';
import { Zap, Loader2 } from 'lucide-react';
import Link from 'next/link';
import { Button } from '@x/ui/components/base';

async function Home({ searchParams }: { searchParams: any }) {
  const { domain, organizationId } = searchParams;

  const cwd = process.cwd();
  const toolsPath = path.join(cwd, 'tools');
  const files = fs.readdirSync(toolsPath);

  return (
    <main>
      <div>
        <div>X</div>
        <Suspense
          fallback={
            <div>
              <Loader2 className="animate-spin" />
            </div>
          }
        >
          {files.map((file, index) => {
            return (
              <Link href={xyz}>
                <Button className="justify-start w-full" variant={'ghost'}>
                  <Zap size={16} className="mr-2 text-gray-200" />
                  <span>{file} </span>
                </Button>
              </Link>
            );
          })}
        </Suspense>
      </div>
    </main>
  );
}

export { Home };
When I substitute this source code directly in my app/page.tsx, it works with no errors
New Guinea Freshwater CrocodileOP
const toolsPath = path.join(cwd, 'tools');

It's in the root of the nextjs project
@New Guinea Freshwater Crocodile ` const toolsPath = path.join(cwd, 'tools');` It's in the root of the nextjs project
Ray
ok try this
import fs from 'fs/promises'
...
const files = await fs.readdir(toolsPath);
Answer
New Guinea Freshwater CrocodileOP
done, let's try
also 1 more erorr, I tried switching to 14.1
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
> Export encountered errors on following paths:
    /_not-found
    /page: /
Error: Command "npm run build" exited with 1
New Guinea Freshwater CrocodileOP
i read but doesnt make much sense
@New Guinea Freshwater Crocodile i read but doesnt make much sense
Ray
try this on app/page.tsx
export const dynamic = 'force-dynamic'
New Guinea Freshwater CrocodileOP
no luck
@New Guinea Freshwater Crocodile no luck
Ray
are you using static export?
do you have output: export in next.config.js
New Guinea Freshwater CrocodileOP
/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = nextConfig;
Why do Ineed output: export?
Idon't wnat a static stite
site*
@New Guinea Freshwater Crocodile /** @type {import('next').NextConfig} */ const nextConfig = {}; module.exports = nextConfig;
Ray
try move the code from @x/core/pages/home to app/page.tsx instead of import
@Ray try move the code from `@x/core/pages/home` to `app/page.tsx` instead of import
New Guinea Freshwater CrocodileOP
sec let me try that
deploying in like a minute
@Ray it works if I move the code back into app/page.tsx
@Ray everything works?
New Guinea Freshwater CrocodileOP
yes
everything
hahah
i think I Know why
I have another page where I'm doing something similar:
import * as actions from "@/actions/x";
import ToolPage from "@x/core/pages/tools/index";

export default async function Page(props: any) {
  return (
    <>
      <ToolPage {...props} actions={actions} />
    </>
  );
}


This works flawlessly
So I think I can't do:
export { Home as default } from "@x/core/pages/index"

I just need to put it in the base component and it should work
Because I think the component needs to be called Page
Ray
I haven't tried to export a component on the page in app router yet. so Im not sure will it cause any problem
@New Guinea Freshwater Crocodile deploying in like a minute
Silver Marten
you don't have to deploy it all the time by the way
just run npm run build
Ray
but look like it does
@Ray but look like it does
New Guinea Freshwater CrocodileOP
yes it does, u cant export a component on the page like that
Ray
in page router we can do that
New Guinea Freshwater CrocodileOP
u need to do 
export default function Page() {

 <YourComponen t/>
}
@Ray in page router we can do that
New Guinea Freshwater CrocodileOP
yes