Warning with `next-mdx-remote` and Blocks. `Warning: React.jsx: Static children should always be an array.`

[stern-shawn]

Expected

Using codehike in conjunction with next-mdx-remote (as before in v0.9), I can create a custom component and annotate some "blocks" using the new Code Hike syntax and have a warning-free experience.

Result

When using a project with next-mdx-remote and trying to use a custom component with blocks, such as this one from the examples doc:

<MyComponent>

The Brandybuck Brunch

## !!breakfasts first

Grilled mushrooms

## !!breakfasts second

Apple pancakes

</MyComponent>

I get the following warnings in my console:

Warning: React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.
    at MDXContent (eval at <anonymous> (file:///Users/sstern/trashfire/docs/node_modules/next-mdx-remote/dist/index.js:37:35), <anonymous>:2162:8)
    at MDXProvider (file:///Users/sstern/trashfire/docs/node_modules/next-mdx-remote/node_modules/@mdx-js/react/lib/index.js:70:18)
    at MDXRemote (file:///Users/sstern/trashfire/docs/node_modules/next-mdx-remote/dist/index.js:12:29)
...

The behavior seems to happen regardless of using single blocks or lists, etc.

As always, thank you for the amazing library ❤️

[pomber]

I think this one is not specific to next-mdx-remote, it happens with other tools too (when not using jsx: true in mdx).

A workaround is to use jsx: true in the mdx options:

const mdxOptions = {
  remarkPlugins: [[remarkCodeHike, chConfig]],
  recmaPlugins: [[recmaCodeHike, chConfig]],
  jsx: true,
}

[gurkerl83]

@pomber In mdx-bundler the jsx: true does not work, but mdx-bundler uses internally esbuild and the @mdx-js/esbuild plugin underneath as written yesterday. Maybe this is similar but I don not really believe that.

@stern-shawn Did you see the Warning in VSCode on the MyComponent tag, or somewhere else, for the first case you have to tell the component to look like the following.

type RawBreakfastData = {
  title: string;
  _data: {
    header: string;
  };
  children: ReactNode;
};

type RawMyComponentProps = {
  title?: string;
  _data?: {
    header: string;
  };
  breakfasts?: Array<RawBreakfastData>;
};

export const MyComponent: FC<
  RawMyComponentProps & {
    children?: ReactNode;
  }
> = ({ children, ...rest }) => {
   // The 'rest' props contain the content of Codehike
   const { breakfasts } = rest;
   // Logic to handle 'breakfasts' here...
};

The ...rest object has various nested properties, and for code blocks, it even contains a stringified value, which might be unnecessary - but that's a separate issue to explore.

Hope this sheds some light on things!

[pomber]

@gurkerl83 I think this is a different issue, the problem is an argument that the recmaPlugin is passing to react/jsx-dev-runtime.

Regarding to the props types, the right way would be to use parseProps with a zod schema.

[stern-shawn]

Thanks @pomber ! I tried using jsx: true in our MDX config, but then that introduces a new error since the MDXRemote component can't understand JSX without the JSX having been compiled away:

 ⨯ SyntaxError: Unexpected token '<'
    at new Function (<anonymous>)
    at file:///Users/sstern/trashfire/docs/node_modules/next-mdx-remote/dist/index.js:37:35
    at Object.useMemo (/Users/sstern/trashfire/docs/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5124:19)
    at useMemo (/Users/sstern/trashfire/docs/node_modules/react/cjs/react.development.js:1650:21)
    at MDXRemote (file:///Users/sstern/trashfire/docs/node_modules/next-mdx-remote/dist/index.js:25:21)

Not sure if there is another setting to modify again to help unmodified JSX strings be interpreted instead of the usually compiled _jsxs(_components... (source for my understanding).

[pomber]

Released in v1.0.1