mdx-bundler: Does not work on Vercel

First issue! Do I get a prize?

mdx-bundler version: 1.0.1
node version: 12
yarn version: 1.22.1

Relevant code or config

import React from "react";
import type {
  MetaFunction,
  LinksFunction,
  LoaderFunction,
} from "@remix-run/react";
import { useRouteData } from "@remix-run/react";
import { json } from "@remix-run/data";
import Moment from "react-moment";
import { useLocation, Link } from "react-router-dom";
import { Posts } from "../../types";
import { GraphQLClient, gql } from "graphql-request";
import { bundleMDX } from "mdx-bundler";
import { MDXProvider } from "@mdx-js/react";
import { getMDXComponent } from "mdx-bundler/client";
import { getHighlighter, remarkPlugin } from "../../helpers/post";

export let loader: LoaderFunction = async ({ params }) => {
  const endpoint = "https://example.com/graphql";
  let headers = {
    headers: {
      authorization: `Bearer token_goes_here`,
      "X-Hasura-Admin-Secret": "secret",
    },
  };
  let query = gql`
    query GetPostBySlug($slug: String!) {
      posts(where: { slug: { _eq: $slug } }) {
        author_name
        content
        created_at
        feat_img
        feat_img_caption
        feat_img_alt
        id
        title
        slug
        excerpt
      }
    }
  `;
  let variables = { slug: params.post };
  //   let data = null;
  //   let error = null;
  const client = new GraphQLClient(endpoint, headers);

  //Fetch post content from the API
  let data = await client.request(query, variables);
  const highlighter = await getHighlighter();
  // Process Returned post data into MDX
  const post = await bundleMDX(data.posts[0].content, {
    files: {},
    remarkPlugins: [[remarkPlugin, { highlighter }]],
  });
  // const post = await compilePost(data.posts[0].slug, data.posts[0]);

  const oneDay = 86400;
  const secondsSincePublished =
    (new Date().getTime() - post.frontmatter.published) / 1000;
  const barelyPublished = secondsSincePublished < oneDay;

  // If this was barely published then only cache it for one minute, giving you
  // a chance to make edits and have them show up within a minute for visitors.
  // But after the first day, then cache for a week, then if you make edits
  // get them there.
  const maxAge = barelyPublished ? 60 : oneDay * 7;

  // If the max-age has expired, we'll still send the current cached version of
  // the post to visitors until the CDN has cached the new one. If it's been
  // expired for more than one month though (meaning nobody has visited this
  // page for a month) we'll make them wait to see the newest version.
  const swr = oneDay * 30;
  return json(
    { data, post },
    {
      headers: {
        "cache-control": `public, max-age=${maxAge}, stale-while-revalidate=${swr}`,
      },
    }
  );
};
// The title and meta tags for the document's <head>
export let meta: MetaFunction = ({ data }: { data: Posts }) => {
  return {
    title: data.data.posts[0].title,
    description: data.data.posts[0].excerpt,
  };
};

function Post({ code, frontmatter }) {
  const Component = getMDXComponent(code);
  return (
    <MDXProvider>
      <Component />
    </MDXProvider>
  );
}

export default function BlogPost() {
  //Hide post menu on small screens when a post is selected
  let location = useLocation();

  let routeData = useRouteData<Posts>();
  // const { source, frontmatter } = routeData.post;
  const { code, frontmatter } = routeData.post;

  const { data } = routeData;
  // const content = hydrate(source);

  return (
    <React.Fragment>
      <div className="relative bg-white overflow-hidden">
        <div className="hidden lg:block lg:absolute lg:inset-y-0 lg:h-full lg:w-full">
          <div
            className="relative h-full text-lg max-w-prose mx-auto"
            aria-hidden="true"
          >
          </div>
        </div>
        <div className="relative px-4 sm:px-6 lg:px-8">
          <div className="text-lg max-w-prose mx-auto">
            <Link className="py-4 block" to="/blog">
              Return to Archive
            </Link>

            <header className="prose lg:prose-xl py-8">
              <h1>{frontmatter.title}</h1>
            </header>

            <figure>
              <img
                className="w-full rounded-lg"
                src={data.posts[0].feat_img ?? ""}
                alt={data.posts[0].feat_img_alt ?? ""}
                width="1310"
                height="873"
              />
              <figcaption>{data.posts[0].feat_img_caption}</figcaption>
            </figure>

            <div className="meta py-2 text-center">
              <Link to="/team/{data.posts[0].author_name}" className="inline">
                <h4 className="inline">By: {data.posts[0].author_name}</h4>
              </Link>
              <h4 className="inline pl-8">Posted: </h4>
              <Moment className="inline " format="HH:MM DD MMM, YY">
                {data.posts[0].created_at}
              </Moment>
            </div>
            <main className="prose lg:prose-xl pb-16">
              <Post code={code} frontmatter={frontmatter} />
            </main>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

What you did: I setup a pretty straightforward blog post compiler on my vercel app and deployed it.

What happened: I can’t get it to work, it always complains about babel missing

Cannot find module ‘@babel/preset-react’ Require stack: - /var/task/node_modules/@babel/core/lib/config/files/plugins.js - /var/task/node_modules/@babel/core/lib/config/files/index.js - /var/task/node_modules/@babel/core/lib/index.js - /var/task/node_modules/@rollup/plugin-babel/dist/index.js - /var/task/node_modules/@remix-run/core/compiler.js - /var/task/node_modules/@remix-run/core/index.js - /var/task/node_modules/@remix-run/vercel/index.js - /var/task/index.js - /var/task/___vc_launcher.js - /var/runtime/UserFunction.js - /var/runtime/index.js

Reproduction repository: https://remix-vercel.benwis.vercel.app/blog/compile-mdx-on-remix You can see the error here.

Problem description: It seems to work fine locally and then not when deployed on vercel. Runs great on my Express app. Suggested solution: I don’t know, installing the package did not make the error go away. It is definitely in my package.json

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 20 (12 by maintainers)

Most upvoted comments

Cool! Thanks for your help here 😃

— Kent C. Dodds

— original message — On February 17, 2021, 1:47 PM MST notifications@github.com wrote:

Closed #2.

—

You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub, or unsubscribe. — end of original message —

kentcdodds on Feb 17, 2021