@timber-js/app 0.2.0-alpha.14 → 0.2.0-alpha.141

package/src/plugins/mdx.ts

@@ -11,7 +11,9 @@
 import type { Plugin } from 'vite';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
-import type { PluginContext } from '#/index.js';
+import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
+import type { PluginContext } from '../plugin-context.js';
 
 const MDX_EXTENSIONS = ['mdx', 'md'];
 
@@ -54,15 +56,49 @@ function shouldActivate(ctx: PluginContext): boolean {
 }
 
 /**
- * Try to dynamically import a module by name. Returns the default export
- * or the module itself, or undefined if the module is not installed.
+ * Try to dynamically import a module by name, resolving from the user's
+ * project root rather than from `@timber-js/app`'s own location.
+ *
+ * Why this matters: pnpm only hoists declared (peer) dependencies into a
+ * package's resolution scope. The MDX integration's optional companions
+ * — `remark-frontmatter`, `remark-mdx-frontmatter`, `@mdx-js/rollup` — are
+ * installed as direct deps of the consumer (e.g. `packages/website`), not
+ * `@timber-js/app`. A bare `import('remark-frontmatter')` from inside this
+ * file resolves against `packages/timber-app/node_modules` and silently
+ * fails with `ERR_MODULE_NOT_FOUND`, which made `tryImport` return
+ * `undefined` and skipped frontmatter parsing entirely — leaving MDX to
+ * choke on YAML as JS expressions (TIM-840).
+ *
+ * Resolving relative to `projectRoot` (via `createRequire`) makes the
+ * lookup walk the consumer's `node_modules` tree first, which is where
+ * pnpm puts the user's deps.
+ *
+ * Returns the default export, the module itself, or undefined if the
+ * module is not installed.
  */
-async function tryImport(name: string): Promise<unknown | undefined> {
+async function tryImport(name: string, projectRoot: string): Promise<unknown | undefined> {
   try {
-    const mod = await import(name);
+    // Anchor resolution at the consumer's package.json so we walk their
+    // node_modules tree, not @timber-js/app's. createRequire().resolve()
+    // returns an absolute file path that ESM dynamic import accepts when
+    // wrapped as a file:// URL.
+    const require = createRequire(join(projectRoot, 'package.json'));
+    const resolved = require.resolve(name);
+    const mod = await import(pathToFileURL(resolved).href);
     return mod.default ?? mod;
   } catch {
-    return undefined;
+    // Fall back to a bare import — covers the rare case where the package
+    // lives next to @timber-js/app (e.g. monorepo with hoisted deps).
+    try {
+      const mod = await import(name);
+      return mod.default ?? mod;
+    } catch (e) {
+      console.debug(
+        `[timber] optional MDX dependency '${name}' not available:`,
+        e instanceof Error ? e.message : e
+      );
+      return undefined;
+    }
   }
 }
 
@@ -80,7 +116,7 @@ export function timberMdx(ctx: PluginContext): Plugin {
   async function activate(): Promise<void> {
     if (innerPlugin !== null || !shouldActivate(ctx)) return;
 
-    const createMdxPlugin = (await tryImport('@mdx-js/rollup')) as
+    const createMdxPlugin = (await tryImport('@mdx-js/rollup', ctx.root)) as
       | ((options?: Record<string, unknown>) => Plugin)
       | undefined;
 
@@ -99,10 +135,11 @@ export function timberMdx(ctx: PluginContext): Plugin {
 
     const mdxConfig = ctx.config.mdx ?? {};
 
-    // Auto-register frontmatter plugins
+    // Auto-register frontmatter plugins. Resolve from the consumer's root
+    // so pnpm finds packages declared in the user's package.json (TIM-840).
     const remarkPlugins: unknown[] = [];
-    const remarkFrontmatter = await tryImport('remark-frontmatter');
-    const remarkMdxFrontmatter = await tryImport('remark-mdx-frontmatter');
+    const remarkFrontmatter = await tryImport('remark-frontmatter', ctx.root);
+    const remarkMdxFrontmatter = await tryImport('remark-mdx-frontmatter', ctx.root);
     if (remarkFrontmatter) remarkPlugins.push(remarkFrontmatter);
     if (remarkMdxFrontmatter) remarkPlugins.push(remarkMdxFrontmatter);