kentcdodds / mdx-bundler

🦀 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

local dev works, but vercel errored

willin opened this issue Β· comments

  • mdx-bundler version: 8.0.1
  • node version: 14

Relevant code or config

import { bundleMDX } from 'mdx-bundler';
import fsp from 'fs/promises';
import path from 'path';
import { remarkCodeHike } from '@code-hike/mdx';
import theme from '~/utils/highlight';

const CONTENT_DIR = path.resolve(process.cwd(), 'contents');

export const getMdx = async (locale: string, realPath: string) => {
  const file = path.join(CONTENT_DIR, locale, realPath);
  const source = await fsp.readFile(file, 'utf-8');
  const dir = path.join(
    CONTENT_DIR,
    locale,
    realPath.replace(/index.mdx$/, '')
  );

  const fileList = await fsp
    .readdir(dir)
    .then((l) => l.filter((f) => f.endsWith('ts') || f.endsWith('tsx')));
  const files = await Promise.all(
    fileList.map(async (f) => [
      `./${f}`,
      await fsp.readFile(path.join(dir, f), 'utf-8')
    ])
  );
  const { code, frontmatter } = await bundleMDX({
    source,
    files: Object.fromEntries(files),
    xdmOptions(options) {
      // eslint-disable-next-line no-param-reassign
      options.remarkPlugins = [
        ...(options.remarkPlugins || []),
        [
          remarkCodeHike,
          {
            theme,
            lineNumbers: true
          }
        ]
      ];
      return options;
    }
  });

  return {
    source: code,
    frontMatter: frontmatter
  };
};

What you did:

add a remark plugin

What happened:

  • local build, dev works
  • deployed to vercel errored

Reproduction repository:

willin/nextjs-docs@9fca0ab

Problem description:

[GET] /_next/data/3zBsHAR-VR-K8jdmawK4f/en/quickstarts.json
12:18:57:16
✘ [ERROR] Could not resolve "@code-hike/mdx/dist/components.cjs.js"
_mdx_bundler_entry_point-9a9e6ec8-d81f-4556-b602-ab94c4b683e5.mdx:3:17:
3 β”‚ import {CH} from "@code-hike/mdx/dist/components.cjs.js";
β•΅                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "@code-hike/mdx/dist/components.cjs.js" as external to exclude it from the bundle, which will remove this error.
2022-02-15T04:19:00.043Z	9ec31cd5-e095-4460-8e4a-13825e71a5a8	ERROR	Error: Build failed with 1 error:
_mdx_bundler_entry_point-9a9e6ec8-d81f-4556-b602-ab94c4b683e5.mdx:3:17: ERROR: Could not resolve "@code-hike/mdx/dist/components.cjs.js"
    at failureErrorWithLog (/var/task/node_modules/esbuild/lib/main.js:1601:15)
    at /var/task/node_modules/esbuild/lib/main.js:1247:28
    at runOnEndCallbacks (/var/task/node_modules/esbuild/lib/main.js:1032:63)
    at buildResponseToResult (/var/task/node_modules/esbuild/lib/main.js:1245:7)
    at /var/task/node_modules/esbuild/lib/main.js:1354:14
    at /var/task/node_modules/esbuild/lib/main.js:664:9
    at handleIncomingPacket (/var/task/node_modules/esbuild/lib/main.js:761:9)
    at Socket.readFromStdout (/var/task/node_modules/esbuild/lib/main.js:631:7)
    at Socket.emit (events.js:400:28)
    at addChunk (internal/streams/readable.js:293:12) {
  errors: [
    {
      detail: undefined,
      location: [Object],
      notes: [Array],
      pluginName: '',
      text: 'Could not resolve "@code-hike/mdx/dist/components.cjs.js"'
    }
  ],
  warnings: [],
  page: '/[...slug]'
}
RequestId: 9ec31cd5-e095-4460-8e4a-13825e71a5a8 Error: Runtime exited with error: exit status 1
Runtime.ExitError

Suggested solution:

have no idea.


willin/nextjs-docs@7da89a2

  const pluginName = '@code-hike/mdx/dist/components.cjs.js';
  const plugin = await fsp.readFile(
    path.join(process.cwd(), 'node_modules', pluginName),
    'utf-8'
  );
files: Object.fromEntries([
      ...files,
      [pluginName, plugin],
      // Vercel
      ['/var/task/node_modules/@code-hike/mdx/dist/components.cjs.js', plugin]
    ]),

still not working

[GET] /concepts
12:38:48:08
2022-02-15T04:38:49.822Z	d7ec18d3-620c-4178-9f2d-f3d0ee5b796a	ERROR	[Error: ENOENT: no such file or directory, open '/var/task/node_modules/@code-hike/mdx/dist/components.cjs.js'] {
  errno: -2,
  syscall: 'open',
  path: '/var/task/node_modules/@code-hike/mdx/dist/components.cjs.js',
  page: '/[...slug]'
}
RequestId: d7ec18d3-620c-4178-9f2d-f3d0ee5b796a Error: Runtime exited with error: exit status 1
Runtime.ExitError