Does not work on Vercel
See original GitHub issueFirst issue! Do I get a prize?
mdx-bundler
version: 1.0.1node
version: 12yarn
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)
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 —
You did it. As you can see, it works fine now: Dang dynamic imports https://starter-vercel.benwis.vercel.app/