Next.js Discord

Discord Forum

app not working in production on vercel

Unanswered
Western Kingbird posted this in #help-forum
Open in Discord
Western KingbirdOP
I have a simple app with a homepage(which is working in production) and some articles(which are not working) this is the code https://github.com/nohanmohsin/banglish
https://banglish-85st.vercel.app/ this is the app I am working on. in my dev environment everything works perfectly. but when you click Start Learning button then it throws two errors(you can see them in the image).
1. no such file or directory. in my components folder I have SideBar.js and ArticleNav.js reading the files from content/docs mdx files to get their names and other metadata. I don't know why that isn't working. it's working perfectly in the dev environment
2. Unsupported server component type: undefined. I don't know what this is all about.

27 Replies

Western KingbirdOP
I had no error while building the app in vercel
only in development I am getting this
Toyger
in learn/[slug]/page.jsx remove @ only at your Content import path
const Content = (await import(`/content/docs/${params.slug}.mdx`)).default;
still the same error
I've used content/docs in Sidebar.js
so I think the error is related to that
@Western Kingbird didn't work
Toyger
maybe you changed some code? for me with version from your repo if I run it I get error, if I remove @ on that line then error dissapear and site works fine.
Western KingbirdOP
I did change a few to implement some stack overflow solutions
but they didnt work also
I got this error at readdirSync
in fs
Western KingbirdOP
alright I was able to fix this but I still haven't fixed the 2nd one
Western KingbirdOP
the error is in the Content component
it's returning undefined for some reason
I don't know why
import ArticleNav from "@/components/ArticleNav";

export async function generateMetadata({ params }) {
  const { metaData } = await import(`/content/docs/${params.slug}.mdx`);
  return { title: metaData.title };
}
const Page = async ({ params }) => {
  const Content = (await import(`/content/docs/${params.slug}.mdx`)).default;
  return (
    <div className="w-full max-w-auto prose prose-img:rounded py-8 pr-8 new-sm:px-8">
      {/* <Content /> */}
      <ArticleNav currentSlug={params.slug} />
    </div>
  );
};

export default Page;
this is the contents in learn/[slug]/page.jsx
I've commented content component just to check and now it is running
Toyger
most likely it can't get correct path for it, but I am not sure how to get deployment path in page, but for some reason default environment variables from vercel are not getting up in page itself.
you can try in route handler or where you use nodejs fs module, try to get current dir, and then in this page.tsx prepend absolute path to mdx, it probably should be something like /var/vercel/content/docs/....
it works in test
just doesnt work in production