@next/mdx or glob from fast glob dont work in production as they should

Unanswered

Rough harvester ant posted this in #help-forum

Rough harvester antOP

2024-05-04T18:04:55.686Z

I have an app that I overtook with an issue that doesnt throw an error or warning, I've narrowed it down to it not getting the data in production, but it really does because it can show the pages like family-fund. What it doesnt do and I will probvide images and code below, is it doesnt show them in an array/doesnt seem to fetch the data? I suppose its a dynamic issue which I dont know how to solve and I can't figure it out for a few days.

5 Replies

Rough harvester antOP

2024-05-04T18:05:54.958Z

Here is one of the components on localhost that it should be displaying, and its code

function CaseStudies({
  caseStudies,
}: {
  caseStudies: Array<MDXEntry<CaseStudy>>
}) {
  return (
    <>
          {caseStudies.map((caseStudy) => (
            <FadeIn key={caseStudy.href} className="flex">
              <article className="relative flex w-full flex-col rounded-3xl p-6 ring-1 ring-neutral-950/5 transition hover:bg-neutral-50 sm:p-8">
                <h3>
                  <Link href={caseStudy.href}>
                    <span className="absolute inset-0 rounded-3xl" />
                    <Image
                      src={caseStudy.logo}
                      alt={caseStudy.client}
                      className="h-16 w-16"
                      unoptimized
                    />
                  </Link>
                </h3>
                <p className="mt-6 flex gap-x-2 text-sm text-neutral-950">
                  <time
                    dateTime={caseStudy.date.split('-')[0]}
                    className="font-semibold"
                  >
                    {caseStudy.date.split('-')[0]}
                  </time>
                  <span className="text-neutral-300" aria-hidden="true">
                    /
                  </span>
                  <span>Case study</span>
                </p>
                <p className="mt-6 font-display text-2xl font-semibold text-neutral-950">
                  {caseStudy.title}
                </p>
                <p className="mt-4 text-base text-neutral-600">
                  {caseStudy.description}
                </p>
              </article>
            </FadeIn>
          ))}
    </>
  )
}

Here is how it looks on localhost

and this is how it looks in production:

the real issue lies here, at least I think so: this is my mdx file.

import { type ImageProps } from 'next/image'
import glob from 'fast-glob'

async function loadEntries<T extends { date: string }>(
  directory: string,
  metaName: string,
): Promise<Array<MDXEntry<T>>> {
  console.log('Directory:::', directory);
  console.log('MetaName:::', metaName);

  const mdxFiles = await glob('**/*.mdx', { cwd: `src/app/[locale]/${directory}` });
  console.log(`Found ${mdxFiles.length} MDX files`);
  console.log('mdxFiles log:', mdxFiles) 

  const entries = await Promise.all(mdxFiles.map(async (filename) => {
    console.log(`Processing file: ${filename}`);
    let metadata = (await import(`../app/[locale]/${directory}/${filename}`))[metaName] as T;
    // console.log(`Extracted metadata:`, metadata);

    return {
     ...metadata,
      metadata,
      href: `/${directory}/${filename.replace(/\/page\.mdx$/, '')}`,
    };
  }));

  // console.log('Sorting entries by date');
  const sortedEntries = entries.sort((a, b) => b.date.localeCompare(a.date));
  // console.log('Sorted entries:', sortedEntries);

  return sortedEntries;
}


type ImagePropsWithOptionalAlt = Omit<ImageProps, 'alt'> & { alt?: string }

export type MDXEntry<T> = T & { href: string; metadata: T }

export interface Article {
  date: string
  title: string
  description: string
  author: {
    name: string
    role: string
    image: ImagePropsWithOptionalAlt
  }
}

export interface CaseStudy {
  date: string
  client: string
  title: string
  description: string
  summary: Array<string>
  logo: ImageProps['src']
  image: ImagePropsWithOptionalAlt
  service: string
  testimonial: {
    author: {
      name: string
      role: string
    }
    content: string
  }
}

export function loadArticles() {
  return loadEntries<Article>('blog', 'article')
}

export function loadCaseStudies() {
  return loadEntries<CaseStudy>('work', 'caseStudy')
}

Now I think that it cant fetch the data in production because its dynamic, but the pages it generates on build time so they become static and arent changing. how can I fix this?