import react runtime in getMDXComponent

packages/@contentlayer/core/package.json

@@ -40,7 +40,7 @@
     "comment-json": "^4.2.3",
     "esbuild": ">=0.17",
     "gray-matter": "^4.0.3",
-    "mdx-bundler": "^10.0.2",
+    "mdx-bundler": "^10.1.1",
     "rehype-stringify": "^10.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-parse": "^11.0.0",

packages/next-contentlayer/src/hooks/useMDXComponent.ts

@@ -1,8 +1,32 @@
-import { getMDXComponent } from '@contentlayer2/core/client'
-// NOTE use ESM/CommonJS compat import here until resolved: https://github.com/facebook/react/issues/11503
-import React from 'react'
+import { getMDXComponent as getMDXComponentOriginal } from '@contentlayer2/core/client'
+import * as React from 'react'
+import * as _jsx_dev_runtime from 'react/jsx-dev-runtime'
+import * as _jsx_runtime from 'react/jsx-runtime'
+import * as ReactDOM from 'react-dom'
 
-export { getMDXComponent }
+// Pass in the React module into the evaluated code instead of having the evaluated code import React
+// See https://github.com/timlrx/contentlayer2/issues/66
+const defaultRuntime = {
+  React,
+  ReactDOM,
+  _jsx_runtime: process.env.NODE_ENV === 'production' ? _jsx_runtime : _jsx_dev_runtime,
+}
+
+/**
+ * Get an MDX component from compiled MDX code
+ *
+ * @param code - The string of code you got from bundleMDX
+ * @param globals - Any variables your MDX needs to have accessible when it runs
+ * @returns A React component that renders the MDX content
+ */
+export const getMDXComponent = (code: string, globals: Record<string, unknown> = {}) => {
+  const options = {
+    ...defaultRuntime,
+    ...globals,
+  }
+
+  return getMDXComponentOriginal(code, options)
+}
 
 export const useMDXComponent = (code: string, globals: Record<string, unknown> = {}) => {
   return React.useMemo(() => getMDXComponent(code, globals), [code, globals])