Merge pull request #386 from zh-lx/fix/compatible-other-loader

fix: compatible for other loaders

Author: zh-lx

demos/turbopack-next15/next.config.ts

@@ -1,10 +1,10 @@
 import { codeInspectorPlugin } from 'code-inspector-plugin';
 import type { NextConfig } from 'next';
-import createMDX from '@next/mdx'
+import createMDX from '@next/mdx';
 
 const withMDX = createMDX({
-  // Add markdown plugins here, as desired
-})
+  extension: /\.(md|mdx)$/,
+});
 
 const nextConfig: NextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
@@ -15,4 +15,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default withMDX(nextConfig)
+export default withMDX(nextConfig);

demos/turbopack-next15/src/app/page.tsx

@@ -1,8 +1,10 @@
-import Image from "next/image";
+import Image from 'next/image';
+import Welcome from './welcome.mdx';
 
 export default function Home() {
   return (
     <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
+      <Welcome />
       <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
         <Image
           className="dark:invert"
@@ -14,7 +16,7 @@ export default function Home() {
         />
         <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
           <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
+            Get started by editing{' '}
             <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
               src/app/page.tsx
             </code>

demos/turbopack-next15/src/app/welcome.mdx

@@ -0,0 +1,11 @@
+# Welcome to my MDX page!
+
+This is some **bold** and _italics_ text.
+
+This is a list in markdown:
+
+- One
+- Two
+- Three
+
+Checkout my React component:

packages/core/src/server/transform/index.ts

@@ -1,3 +1,4 @@
+import fs from 'fs';
 import { transformJsx } from './transform-jsx';
 import { transformSvelte } from './transform-svelte';
 import { transformVue } from './transform-vue';
@@ -31,12 +32,18 @@ const CodeInspectorEscapeTags = [
 ];
 
 export function transformCode(params: TransformCodeParams) {
-  let { content, filePath, fileType, escapeTags = [], pathType = 'relative' } = params;
-  const finalEscapeTags = [
-    ...CodeInspectorEscapeTags,
-    ...escapeTags,
-  ];
-  
+  let {
+    content,
+    filePath,
+    fileType,
+    escapeTags = [],
+    pathType = 'relative',
+  } = params;
+  if (!fs.existsSync(filePath)) {
+    return content;
+  }
+  const finalEscapeTags = [...CodeInspectorEscapeTags, ...escapeTags];
+
   filePath = getRelativeOrAbsolutePath(filePath, pathType);
 
   try {

packages/core/src/server/use-client.ts

@@ -309,6 +309,9 @@ export async function getCodeWithWebComponent({
   code: string;
   inject?: boolean;
 }) {
+  if (!fs.existsSync(file)) {
+    return code;
+  }
   // start server
   if (options.behavior?.locate !== false) {
     await startServer(options, record);