@next/mdx doesn't work as expected in production (on vercel)

[Patrik-Tkacik]

Link to the code that reproduces this issue

https://github.com/Patrik-Tkacik/Nextjs-reproduction

To Reproduce

Clone the repository, npm install and run npm run dev, go on the root/localized pag e which will most likely be /en for you, and check out the CaseStudies function, on localhost, whether you're running dev mode or build it and start it, it works. This is how it should look like:

now check it out from my vercel hosted app here.

Current vs. Expected behavior

Those projects you see in the CaseStudies function, are individual MDX pages that get collected by the lib/mdx.ts file. That should give the data to all components and it does, it also gives the info to make the pages. Now my issue is when running this in production it generates the mdx pages into normal tsx pages no problem, but it doesn't give the data to the components like CaseStudies. When I debugged it a little it was because the CaseStudies function doesn't get anything in the array. I have found a stackoverflow answer which I hoped would help me, because it worked fine before I localized this project (I modified a template) so I thought that was it but it cant be, maybe its glob, maybe its mdx, it doesn't make sense to me. The stackoverflow indicated the blob is the issue, but it didnt have any issues giving data to generate the static pages at build time on vercel. What could it be?

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:33:31 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T8112
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 21.4.0
  npm: 10.2.5
  Yarn: 1.22.21
  pnpm: 8.12.1
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Internationalization (i18n), Markdown (MDX), Runtime

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

[Guccifer808]

Hey there. Indeed i'm having the same issue with the same template, although I rolled custom internalization the issue stays the same. Imported MDX content doesn't translate (if you try wrap items in t() you get undefined on vercel prod environment, but works fine on my local dev environment. However, doing the same but without t() works just fine. Most likely I'll walk away from mdx in this case.

I'm curious if you made any progress debugging this?

[Patrik-Tkacik]

I’ve put the project on pause as I have no way to track whats wrong effectively. My issue was with static/dynamic paths, I think. Not with mdx files not translating. What alternative will you use @Guccifer808?

[Guccifer808]

@Patrik-Tkacik I've switched from .mdx to an array of objects works flawlessly.

My issue was with static/dynamic paths, I think. Not with .mdx files not translating

According to my tests .mdx in defined and renders fine in prod, it's the object inside it that returns undefined in prod. Thus, dynamic paths (in my case app/[lang]/) were not an issue. Moreover, all other parts of the app have no issues, only objects inside .mdx

[G0rav]

Hi, any luck with the solution?

It's not working for me as well. Everything works well on local dev but on production, it doesn't loads the content of .mdx file. Moreover, it doesn't produce any error so it is hard to understand what's wrong.

[Patrik-Tkacik]

@Guccifer808 so you made a static array instead of dynamically fetching it?

[Patrik-Tkacik]

@G0rav Hey, sorry no. Still have the project on hold, I haven't been experimenting with it. have my hands full of work on some other stuff.

[Guccifer808]

@Guccifer808 so you made a static array instead of dynamically fetching it?

I made loader similar to mdxloader just migrated to array of objects:

import { allBrandsData, brandsNames } from '@/data/allBrandsData'

/**

• Loads brand data based on the provided parameter.
• @param {string} type - The type of data to load. Can be 'data' for all brand data or 'names' for brand names.
• @returns {Promise<Array|Object|null>} - Returns the requested data or null if the parameter is invalid. */ export async function loadBrandData(type) { try { switch (type) { case 'data': return allBrandsData case 'names': return brandsNames default: console.warn(Invalid parameter: ${type}. Expected 'data' or 'names'.) return null } } catch (error) { console.error(Error loading brand data: ${error.message}) throw error } }