Using @mdx-js/react 2.0.0-rc1 inside Next.js

[iAdramelk]

I'm trying to update from 2.0.0-next.9 to 2.0.0-rc1, it mostly works and fixes bunch of bugs, but I have a problem with making @mdx-js/react work.

So my setup is something like this. I have mdx file (simplified version):

import Layout from "layouts/LayoutName";

export const meta = { key: "value" };

export default function Wrapper (props) {
  return <Layout {...props} meta={meta} />;
};

And I have layout file (simplified version):

import { MDXProvider } from "@mdx-js/react";

const components = {
  h1: (props) => { return <h1 {...props}  /> }
};

export default function LayoutName ({ children }) {
  return <MDXProvider components={components}>{children}</MDXProvider>;
}

This code is running on Next.js with both client and server rendering modes. It works without problem on 2.0.0-next.9, but on 2.0.0-rc1 it fails with error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/@mdx-js/react/index.js from /filename.js not supported.
Instead change the require of index.js in filename.js to a dynamic import() which is available in all CommonJS modules.

The problem here from that I understand is that Nextjs didn't compile @mdx-js/react to the server and leave it as require instead. Lines from created bundle file:

/***/ "@mdx-js/react":
/*!********************************!*\
  !*** external "@mdx-js/react" ***!
  \********************************/
/***/ (function(module) {

"use strict";
module.exports = require("@mdx-js/react");;

/***/ }),

Without MDXProvider everything works as intended.

And I can't find a way how I can replace it with import only for the SSR build. Is there a known workaround for this problem?

I can probably try to manually push components prop to children, but it looks hacky.

[ChristianMurphy]

@iAdramelk if you are using Next.js 11.1 or higher, you may need to enable https://nextjs.org/blog/next-11-1#es-modules-support

[iAdramelk]

Thanks for the fix, I really appreciate it!

// pages/index.js
import {MDXProvider} from '@mdx-js/react'

// ...

export default function Post(props) {
  const components = someCondition ? specialComponents : otherComponents
  return (
    <MDXProvider components={components}>
      <main {...props} />
    </MDXProvider>
  )
}

This is pretty much that I'm doing with 2.0.0-next.9 right now and it works. But it still includes MDXProvider which adds additional component to the bundle and creates React.context that somewhat slows page render. It's probably not super bad all things considered, but if I could add components to the mdx component directly without using context it would probably be more efficient.

[wooorm]

Yeah this isn't about mdx. MDX exposes components. It let's you do exactly that. Calling them is what next does. Maybe there are options for that there.

[iAdramelk]

So, I’m guessing that this is the problem. Next doesn’t give you that, apparently? Maybe that can be fixed by them. Or Next already has that. This is unrelated to MDX — it happens on the Next level.

Not exactly. Next didn't know anything about mdx and don't have special integration with it (at least I didn't use it). Its just loads react component with a default export as a page if it is placed inside pages folder.

So I'm using @mdx-js/loader to compile mdx to the javascript and then Next loads it as a page without any changes. What I want to do is to use just @mdx-js/loader to compile static js file from mdx with layout and components ans save it as .js file to the filesystem. Same as Docsaurus is doing without Next. I think Gatsby is doing more or less the same thing, but I haven't check their implementation.

Theoretically I can do my own webpack loader for MDX which will just wrap generated MDXContent with something else based on the filename, but it will be cool to have it working by default.

[wooorm]

Its just loads react component with a default export as a page if it is placed inside pages folder.

Again, next loads it and renders it. We don't do that. We export a component. We do exactly what you describe you want.

[iAdramelk]

I will check it out. Maybe I understand something wrong. Thanks anyway.

[wooorm]

nvm