Merge pull request #19 from eps1lon/mdx-bundler-compat

Ensure maximum compatibility with mdx-bundler

packages/@contentlayer/core/client.d.ts

@@ -0,0 +1 @@
+export * from './dist/client.js'

packages/@contentlayer/core/package.json

@@ -2,9 +2,19 @@
   "name": "@contentlayer2/core",
   "version": "0.4.3",
   "type": "module",
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "default": "./dist/client.js"
+    }
+  },
   "types": "./dist/index.d.ts",
   "files": [
+    "client.d.ts",
     "./dist/**/*.{js,ts,map}",
     "./src",
     "./package.json"

packages/@contentlayer/core/src/client.ts

@@ -0,0 +1 @@
+export { getMDXComponent } from 'mdx-bundler/client/index.js'

packages/next-contentlayer/package.json

@@ -35,7 +35,7 @@
     "./package.json"
   ],
   "scripts": {
-    "prepack": "awk '!/^export|^import/' dist/index-cjs.js > dist/index-cjs.cjs; cp src/hooks/jsx-runtime.cjs dist/hooks/jsx-runtime.cjs"
+    "prepack": "awk '!/^export|^import/' dist/index-cjs.js > dist/index-cjs.cjs"
   },
   "dependencies": {
     "@contentlayer2/core": "workspace:*",

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

@@ -1,29 +1,8 @@
-import type { MDXComponents } from 'mdx/types'
+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'
-// NOTE use ESM/CommonJS compat import here until resolved: https://github.com/facebook/react/issues/11503
-import ReactDOM from 'react-dom'
-
-// @ts-expect-error React version workaround (This CJS workaround can be removed once Contentlayer is only targeting React 18+)
-import { _jsx_runtime } from './jsx-runtime.cjs'
-
-// NOTE This cjs-import workaround above is needed since there was a "breaking change"
-// on the import/export level from React v17 to v18.
-// This workaround should work in Next.js since it supports both CJS and ESM at the same time.
-//
-// See https://github.com/contentlayerdev/contentlayer/issues/162
-// import * as _jsx_runtime from 'react/jsx-runtime'
 
-type MDXContentProps = {
-  [props: string]: unknown
-  components?: MDXComponents
-}
-
-export const getMDXComponent = (code: string, globals: Record<string, unknown> = {}): React.FC<MDXContentProps> => {
-  const scope = { React, ReactDOM, _jsx_runtime, ...globals }
-  const fn = new Function(...Object.keys(scope), code)
-  return fn(...Object.values(scope)).default
-}
+export { getMDXComponent }
 
 export const useMDXComponent = (code: string, globals: Record<string, unknown> = {}) => {
   return React.useMemo(() => getMDXComponent(code, globals), [code, globals])