MDX stopped working all of a sudden

fableforce commented 2 years ago

Verify canary release

[X] I verified that the issue exists in Next.js canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Home Binaries: Node: 16.14.2 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 12.1.5 react: 18.1.0 react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Followed instructions for setup of MDX with Next here:
Upon first dev, MDX works as expected
Going through our second dev review now and for some reason, .mdx pages return a 404 page
Routes still work as expected, though

Expected Behavior

Pages to load with correct layout.

To Reproduce

next config:

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
};

const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },
});

// Let next work with transpile modules for GSAP.
const withTM = require("next-transpile-modules")(["gsap"]);

module.exports = { nextConfig }; // module exports can be an object

module.exports = withMDX({
  // Append the default value with md extensions
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
  images: {
    domains: ["images.unsplash.com", "tailwindui.com"],
  },
});

module.exports = withTM();

specific mdx file

import LegalLayout from "components/layout/LegalLayout";

export const meta = {
  author: "nil",
  title: "Cookie policy",
  lastUpdated: "28th April, 2022",
};

# Content here

export default ({ children }) => (
  <LegalLayout meta={meta}>{children}</LegalLayout>
);

layout file

import Head from "next/head";

export default function LegalLayout({ meta, children }) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {/* Hero section */}
        <section className="bg-gray-100">
          <div className="container max-w-3xl py-40 mx-auto">
            <div>
              <h1 className="text-5xl font-semibold">{meta.title}</h1>
              <h3 className="mt-4 font-medium">{meta.lastUpdated}</h3>
            </div>
          </div>
        </section>

        {/* Article starts here. */}
        <article className="mx-auto prose max-w-prose">
          <div>{children}</div>
          <div>{meta.author}</div>
        </article>
      </main>
    </>
  );
}

icyJoseph commented 2 years ago

I think I found the solution for your issue here: https://github.com/vercel/next.js/discussions/36848 - Please confirm.

balazsorban44 commented 2 years ago

This sounds like the correct solution: https://github.com/vercel/next.js/discussions/36848#discussioncomment-2735430 :+1:

Otherwise, we would need a full reproduction. Feel free to add one and we can re-open.

github-actions[bot] commented 2 years ago

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js