Next.js Discord

Discord Forum

MDX Next.js app failing to deploy on github pages

Unanswered
Mini Lop posted this in #help-forum
Open in Discord
Mini LopOP
My Next.js app is using MDX to display content. When I run the app in development mode, it works fine. However, when I deploy the app on github pages, I get the error: "TypeError: error must be an instance of Error" inside my next.config.mjs file when the website is building.

My next.config.mjs file looks like this:
import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions`` to include MDX files
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  // Optionally, add any other Next.js config below
}
 
const withMDX = createMDX({
  // Add markdown plugins here, as desired
})
 
// Wrap MDX and Next.js config with each other
export default withMDX(nextConfig)

Do you have any idea what the problem could be?

7 Replies

muadpn
Whats the error log ?
Did you add all the dependecy ? also add useMdxComponent on root ?
also, did you install all the dependency ? for next-mdx ?
npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx


import remarkGfm from "remark-gfm";
import createMDX from "@next/mdx";
import remarkToc from "remark-toc";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  // Add markdown plugins here, as desired
  options: {
    remarkPlugins: [remarkGfm, remarkToc],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);


try this and check whether it work.

also go through

https://nextjs.org/docs/app/building-your-application/configuring/mdx
@muadpn npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx import remarkGfm from "remark-gfm"; import createMDX from "@next/mdx"; import remarkToc from "remark-toc"; /** @type {import('next').NextConfig} */ const nextConfig = { pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"], }; const withMDX = createMDX({ // Add markdown plugins here, as desired options: { remarkPlugins: [remarkGfm, remarkToc], rehypePlugins: [], }, }); export default withMDX(nextConfig); try this and check whether it work. also go through https://nextjs.org/docs/app/building-your-application/configuring/mdx
Mini LopOP
Hi,
Thanks for getting back to me on this. I have installed all the dependencies, and I do have the "mdx-components.tsx" component in my root directory. My next.js app works fine with MDX when I run the app using "npm run dev," but when I deploy it on github pages, I get the error: "TypeError: error must be an instance of Error".

That's unfortunately all github pages tells me, which is why dealing with this bug as been so frustrating.
Mini LopOP
I experimented a bit and found out my app deploys fine on Vercel as opposed to github pages. This isn't a full fix, but it will do for now.
muadpn
Npm run build on local and check what's going on, where exactly the error occurr and what's in the page and debugg it