fix(next-mdx): preserve MDX metadata in webpack

packages/next-mdx/index.js

@@ -35,9 +35,29 @@ module.exports =
           '@mdx-js/react',
           require.resolve('./mdx-components.js'),
         ]
+        const rscMdxLoader =
+          options.defaultLoaders.babel &&
+          typeof options.defaultLoaders.babel === 'object' &&
+          options.defaultLoaders.babel.loader?.includes('next-swc-loader')
+            ? {
+                ...options.defaultLoaders.babel,
+                options: {
+                  ...options.defaultLoaders.babel.options,
+                  bundleLayer: 'rsc',
+                },
+              }
+            : options.defaultLoaders.babel
         config.module.rules.push({
           test: extension,
-          use: [options.defaultLoaders.babel, loader],
+          oneOf: [
+            {
+              issuerLayer: 'rsc',
+              use: [rscMdxLoader, loader],
+            },
+            {
+              use: [options.defaultLoaders.babel, loader],
+            },
+          ],
         })
 
         if (typeof inputConfig.webpack === 'function') {

test/e2e/app-dir/mdx/app/page.mdx

@@ -1,5 +1,9 @@
 # Hello World
 
+export const metadata = {
+  title: 'MDX metadata',
+}
+
 This is MDX!
 
 import { Client } from './client'

test/e2e/app-dir/mdx/mdx.test.ts

@@ -22,6 +22,7 @@ for (const type of ['with-mdx-rs', 'without-mdx-rs']) {
     describe('app directory', () => {
       it('should work in initial html', async () => {
         const $ = await next.render$('/')
+        expect($('title').text()).toBe('MDX metadata')
         expect($('h1').text()).toBe('Hello World')
         expect($('p').text()).toBe('This is MDX!')
       })
@@ -97,7 +98,8 @@ for (const type of ['with-mdx-rs', 'without-mdx-rs']) {
       it('should work in initial html', async () => {
         const $ = await next.render$('/pages')
         expect($('h1').text()).toBe('Hello World')
-        expect($('p').text()).toBe('This is MDX!')
+        expect($('p').first().text()).toBe('This is MDX!')
+        expect($('#pages-router-counter').text()).toBe('Count: 0')
       })
 
       // Recommended for tests that need a full browser

test/e2e/app-dir/mdx/pages/pages/index.mdx

@@ -1,3 +1,13 @@
 # Hello World
 
 This is MDX!
+
+import { useState } from 'react'
+
+export function Counter() {
+  const [count] = useState(0)
+
+return <p id="pages-router-counter">Count: {count}</p>
+}
+
+<Counter />