Remove default parameter of MDXContent component in compile output?

[mjy9088]

Currently, the compile output contains the following:

export default function MDXContent(props = {}) {

This should not have a default parameter {} to be used in Next.js.

A type error occurs at checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() where TEntry is typeof import(the generated file) in the Next.js-generated code:

Type '{} | undefined' does not satisfy the constraint 'PageProps'.
Type 'undefined' is not assignable to type 'PageProps'.

To address this, my build script includes the following:

import { mkdir, readFile, writeFile } from "node:fs/promises";

import babel from "@babel/core";

import { dirname } from "node:path";
import { babelPluginSyntaxMdx } from "./plugin";

const original = `export default function MDXContent(props = {}) {
  const {
    wrapper: MDXLayout
  } = props.components || {};
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}`;

const replacement = `export { _createMdxContent as default };`;

export async function compile(
  inFilePath: string,
  outFilePath: string
): Promise<void> {
  const content = (await readFile(inFilePath)).toString();
  const result = await babel.transformAsync(content, {
    filename: inFilePath,
    plugins: [babelPluginSyntaxMdx],
  });
  const code = result!.code!;

  if (!code.endsWith(original)) {
    throw new Error("Dependencies updated, build script must be updated.");
  }
  const replacedCode =
    code.substring(0, code.length - original.length) + replacement;

  await mkdir(dirname(outFilePath), { recursive: true });
  await writeFile(outFilePath, replacedCode);
}

---

So my question is: Is it worth opening an issue about this? I'm not sure if it is really a problem.

Minimum reproducible example: https://github.com/my-trash-bin/240526

[remcohaszing]

Please elaborate where you’re seeing this error. To what file is it related? What command are you running? What is the exact output? Do you have an example repository and steps to reproduce?

[mjy9088]

Thank you for reminding me!

Here is the minimum reproducible example: https://github.com/my-trash-bin/240526

I referred to https://mdxjs.com/docs/getting-started/ when I wrote the scripts.

[remcohaszing]

Missing steps to reproduce (please provide this next time):

git clone https://github.com/my-trash-bin/240526.git
cd 240526/core
sh build.sh

next build output:

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

src/app/(articles)/(articles)/2024-05-21-plan-to-develop-blog/page.js
Type error: Type '{} | undefined' does not satisfy the constraint 'PageProps'.
  Type 'undefined' is not assignable to type 'PageProps'.

Running tsc -b afterwards yields:

$ tsc -b             
.next/types/app/(articles)/(articles)/2024-05-21-plan-to-develop-blog/page.ts:28:29 - error TS2344: Type '{} | undefined' does not satisfy the constraint 'PageProps'.
  Type 'undefined' is not assignable to type 'PageProps'.

28 checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error.

The problem is that Next.js is trying to be smart, but their check is simply wrong. To work around it, add "**/(articles)/**" to the "exclude" array in tsconfig.json.

[mjy9088]

The problem is that Next.js is trying to be smart, but their check is simply wrong.

I think the problem is both that

• Next trying to infer types from js
• MDX adding a useless default parameter

but I think a more fundamental fix would be to remove the default parameter from MDX rather than adding .next/**/* to the exclude in tsconfig.json which disables additional type checking.

...or is there any case where the default parameter is needed? If so, I'll leave an issue in Next, thanks :)

[remcohaszing]

They’re checking whether the inferred type satisfies PageProps. What matters is that PageProps is assignable to {} | undefined.

Anyway, I suggest to exclude **/(articles)/** from type checking. This is one quirks of an IMO quite hacky approach by Next.js. I feel more will follow. But you should use whatever solution you think is best.

[mjy9088]

Thanks I decided to exclude them :)