Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does not work on Vercel

See original GitHub issue

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

Issue Analytics

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

Top GitHub Comments

1reaction

kentcdoddscommented, Feb 17, 2021

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 —

0reactions

benwiscommented, Feb 17, 2021

You did it. As you can see, it works fine now: Dang dynamic imports https://starter-vercel.benwis.vercel.app/

Top Results From Across the Web

Errors – Vercel Docs

You may encounter a variety of errors when you interact with the Vercel platform. They can reflect issues that happen with external providers...

Why does npm run start not work on Vercel?

If your build command is npm run start , node app.js , nodemon server.js , or similar, it is likely you are trying...

Troubleshoot a Build – Vercel Docs

This page covers scenarios you may encounter during the Build step that will require you to troubleshoot, including: Build errors that cancel a...

Troubleshooting – Vercel Docs

When you connect a domain to a Project, Vercel checks if this domain is already associated with a Personal Account or Team. A...

Why does my Serverless Function work locally but not when ...

One of the common reasons for different behavior across environments is whether or not your Serverless Functions depend on packages with native dependencies....