Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does not work on Vercel #2

Closed
benwis opened this issue Feb 17, 2021 · 20 comments
Closed

Does not work on Vercel #2

benwis opened this issue Feb 17, 2021 · 20 comments
Labels
released

Comments

@benwis
Copy link

benwis commented Feb 17, 2021

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
@kentcdodds
Copy link
Owner

Ah, I forgot to add a few deps. Fixed now! Thanks!

@kentcdodds
Copy link
Owner

@all-contributors please add @benwis for bugs

@allcontributors allcontributors bot mentioned this issue Feb 17, 2021
Merged
@allcontributors
Copy link
Contributor

@kentcdodds

I've put up a pull request to add @benwis! 🎉

@github-actions
Copy link

🎉 This issue has been resolved in version 1.0.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@benwis
Copy link
Author

benwis commented Feb 17, 2021

I hate to be this guy, but updating to the fixed version and redeploying appears to have the exact same error. I wonder if vercel is doing something that prevents rollupBabel from finding it

@kentcdodds kentcdodds reopened this Feb 17, 2021
@kentcdodds
Copy link
Owner

Make sure that mdx-bundler is a regular dep?

@kentcdodds
Copy link
Owner

Also, make sure you're using the latest version and don't have the old version in a lockfile.

@kentcdodds
Copy link
Owner

Also, I noticed that you don't need files, so I'm pushing an update for files to be optional :)

@benwis
Copy link
Author

benwis commented Feb 17, 2021 •
edited
Loading

That's great, I will be using files soon :)
I build a simpler example. Here's the link to the site on vercel:https://starter-vercel.benwis.vercel.app/
Here's the full git repo:
https://github.com/benwis/starter-vercel

I used yarn, the yarn.lock is present and mdx-bundler is a regular dep :)
Same error as before

@kentcdodds
Copy link
Owner

Does it work if your run the production build locally?

@benwis
Copy link
Author

benwis commented Feb 17, 2021 •
edited
Loading

Yep, works great locally with yarn start and it contoniues to work on Fly.io with my Express based app

@kentcdodds
Copy link
Owner

Can you give me all the logs from a failed deploy on vercel?

@benwis
Copy link
Author

benwis commented Feb 17, 2021 via email •
edited
Loading

@benwis
Copy link
Author

benwis commented Feb 17, 2021 


20:56:57.670 | Retrieving list of deployment files...
-- | --
20:56:59.553 | Downloading 195 deployment files...
20:57:02.199 | Analyzing source code...
20:57:02.538 | Warning: Due to `builds` existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings
20:57:02.939 | Installing build runtime...
20:57:03.451 | Build runtime installed: 512.212ms
20:57:05.281 | Looking up build cache...
20:57:05.329 | Build cache not found
20:57:06.091 | Installing dependencies...
20:57:06.442 | yarn install v1.22.10
20:57:06.501 | [1/4] Resolving packages...
20:57:06.750 | [2/4] Fetching packages...
20:57:15.740 | info fsevents@2.3.2: The platform "linux" is incompatible with this module.
20:57:15.741 | info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
20:57:15.746 | [3/4] Linking dependencies...
20:57:15.748 | warning "mdx-bundler > @babel/preset-env@7.12.16" has unmet peer dependency "@babel/core@^7.0.0-0".
20:57:15.748 | warning "mdx-bundler > @babel/preset-react@7.12.13" has unmet peer dependency "@babel/core@^7.0.0-0".
20:57:15.748 | warning "mdx-bundler > @babel/preset-typescript@7.12.16" has unmet peer dependency "@babel/core@^7.0.0-0".
20:57:15.748 | warning "mdx-bundler > @rollup/plugin-babel@5.3.0" has unmet peer dependency "@babel/core@^7.0.0".
20:57:15.749 | warning " > react-router-dom@6.0.0-beta.0" has unmet peer dependency "history@>=5".
20:57:15.753 | warning " > react-router@6.0.0-beta.0" has unmet peer dependency "history@>=5".
20:57:15.754 | warning " > graphql-request@3.4.0" has unmet peer dependency "graphql@14.x \|\| 15.x".
20:57:15.754 | warning " > graphql-tag@2.11.0" has unmet peer dependency "graphql@^0.9.0 \|\| ^0.10.0 \|\| ^0.11.0 \|\| ^0.12.0 \|\| ^0.13.0 \|\| ^14.0.0 \|\| ^15.0.0".
20:57:21.748 | [4/4] Building fresh packages...
20:57:23.625 | Done in 17.19s.
20:57:32.667 | Uploading build outputs...
20:57:41.549 | Uploading build outputs...
20:57:43.500 | Done with static build
20:57:45.780 | Build completed. Populating build cache...
20:57:54.491 | Uploading build cache [48.36 MB]...
20:57:55.471 | Build cache uploaded: 979.967ms
20:57:55.691 | Done with "index.js"

@benwis
Copy link
Author

benwis commented Feb 17, 2021 •
edited
Loading

Adding @babel/core to package.json in the mdx-bundler node_modules folder does not appear to fix it.I'm still not sure if vercel is redownloading my packages or not, but I think it should be. In case its not obvious, feel free to fork or reuse the most recent github example repo. It should be easy to download and deploy it to vercel so you can see any issues and there is nothing secret in it.

@kentcdodds
Copy link
Owner

I've just released another version that includes @babel/core as a regular dep. I doubt this will fix the issue, but just in case, give it a go?

@kentcdodds
Copy link
Owner

And let me know if the error is any different or if it's still: Cannot find module '@babel/preset-react'

@kentcdodds
Copy link
Owner

Ok, actually, this last commit might fix the issue. Should be released in a moment. Go ahead and give this a try: 52eeea5

@benwis
Copy link
Author

benwis commented Feb 17, 2021

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

@benwis benwis closed this as completed Feb 17, 2021
@kentcdodds
Copy link
Owner

kentcdodds commented Feb 17, 2021 via email

@theoludwig theoludwig mentioned this issue May 13, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kentcdodds @benwis