another attempt to fix Module not found: Can't resolve 'module' (#3349)

* aa

* aa

* remove unneeded

* prettier

Author: dimaMachina

.changeset/plenty-windows-occur.md

@@ -0,0 +1,12 @@
+---
+'nextra': patch
+---
+
+another attempt to fix:
+
+```
+Failed to compile.
+
+./node_modules/typescript/lib/typescript.js
+Module not found: Can't resolve 'module'
+```

packages/nextra/src/server/compile.ts

@@ -158,7 +158,6 @@ export async function compileMdx(
   }
 
   const isRemoteContent = outputFormat === 'function-body'
-  const transformers = await getTransformers()
 
   const compiler =
     !useCachedCompiler || isRemoteContent
@@ -205,29 +204,6 @@ export async function compileMdx(
     throw error
   }
 
-  async function getTransformers() {
-    // Disable twoslash in browser
-    if (typeof window !== 'undefined') {
-      return []
-    }
-
-    // TODO: For some reason I get Error: Cannot find module 'path' in remote content,
-    // disable twoslash temporarily
-    if (isRemoteContent) {
-      return []
-    }
-    const { rendererRich, transformerTwoslash } = await import(
-      '@shikijs/twoslash'
-    )
-
-    return [
-      transformerTwoslash({
-        renderer: rendererRich(),
-        explicitTrigger: true
-      })
-    ]
-  }
-
   function createCompiler(): Processor {
     return createProcessor({
       jsx,
@@ -249,7 +225,7 @@ export async function compileMdx(
         ] satisfies Pluggable,
         isRemoteContent && remarkRemoveImports,
         remarkFrontmatter, // parse and attach yaml node
-        [remarkMdxFrontMatter] satisfies Pluggable,
+        remarkMdxFrontMatter,
         remarkGfm,
         format !== 'md' &&
           ([
@@ -301,7 +277,6 @@ export async function compileMdx(
                 rehypePrettyCode,
                 {
                   ...DEFAULT_REHYPE_PRETTY_CODE_OPTIONS,
-                  transformers,
                   ...rehypePrettyCodeOptions
                 }
               ] as any,

packages/nextra/src/server/index.ts

@@ -192,13 +192,6 @@ const nextra: Nextra = nextraConfig => {
             test: new RegExp(`pages${RE_SEP}_app\\.`),
             issuer: request => !request,
             use: defaultLoaderOptions
-          },
-          {
-            test: new RegExp(
-              `@typescript${RE_SEP}vfs${RE_SEP}dist${RE_SEP}vfs\\.`
-            ),
-            issuer: request => !!request,
-            use: defaultLoaderOptions
           }
         )
 

packages/nextra/src/server/loader.ts

@@ -1,4 +1,5 @@
 import path from 'node:path'
+import { rendererRich, transformerTwoslash } from '@shikijs/twoslash'
 import slash from 'slash'
 import type { LoaderContext } from 'webpack'
 import type { LoaderOptions, PageOpts } from '../types'
@@ -83,14 +84,6 @@ export async function loader(
 
   const currentPath = slash(mdxPath)
 
-  if (currentPath.includes('@typescript/vfs/dist/vfs.')) {
-    // Fixes https://github.com/microsoft/TypeScript-Website/pull/3022
-    // Fixes https://github.com/shuding/nextra/issues/3322#issuecomment-2384046618
-    return source
-      .replace(/String\.fromCharCode\(112, ?97, ?116, ?104\)/, '"path"')
-      .replace(/String\.fromCharCode\(102, ?115\)/, '"fs"')
-  }
-
   if (currentPath.includes('/pages/api/')) {
     logger.warn(
       `Ignoring ${currentPath} because it is located in the "pages/api" folder.`
@@ -164,7 +157,16 @@ ${themeConfigImport && '__nextra_internal__.themeConfig = __themeConfig'}`
       ...mdxOptions,
       jsx: true,
       outputFormat: 'program',
-      format: 'detect'
+      format: 'detect',
+      rehypePrettyCodeOptions: {
+        transformers: [
+          transformerTwoslash({
+            renderer: rendererRich(),
+            explicitTrigger: true
+          })
+        ],
+        ...mdxOptions?.rehypePrettyCodeOptions
+      }
     },
     readingTime: _readingTime,
     defaultShowCopyCode,