kentcdodds / mdx-bundler

🦤 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!
MIT License
1.78k stars 75 forks source link

Deploying to Vercel gives esbuild error #154

Open mattstobbs opened 2 years ago

mattstobbs commented 2 years ago

Relevant code or config

Code from the example in the README

const mdxSource = `
---
title: Example Post
published: 2021-02-13
description: This is some description
---

# Wahoo

import Demo from './demo'

Here's a **neat** demo:

<Demo />
`.trim();

const result = await bundleMDX({
      source: mdxSource,
      files: {
        './demo.tsx': `
    import * as React from 'react'

    function Demo() {
      return <div>Neat demo!</div>
    }

    export default Demo
        `,
      },
    });

What you did:

Created a Remix project with MDXBunder and deployed it to vercel

What happened:

It worked great when running locally, but when it is deployed to vercel, it gives the error

Error: The package "esbuild-linux-64" could not be found, and is needed by esbuild.

If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" flag. The "optionalDependencies" package.json feature is used
by esbuild to install the correct binary executable for your current platform.
    at generateBinPath (/var/task/output/server/pages/node_modules/esbuild/lib/main.js:1806:15)
    at esbuildCommandAndArgs (/var/task/output/server/pages/node_modules/esbuild/lib/main.js:1862:11)
    at ensureServiceIsRunning (/var/task/output/server/pages/node_modules/esbuild/lib/main.js:2019:25)
    at Object.build (/var/task/output/server/pages/node_modules/esbuild/lib/main.js:1912:26)
    at bundleMDX (/var/task/output/server/pages/node_modules/mdx-bundler/dist/index.js:242:33)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async compileMdx (/var/task/output/server/pages/api/_build/index.js:482:20)
    at async getMdxPage (/var/task/output/server/pages/api/_build/index.js:504:24)
    at async loader (/var/task/output/server/pages/api/_build/index.js:527:16)
    at async Object.callRouteLoader (/var/task/output/server/pages/node_modules/@remix-run/server-runtime/data.js:73:14)

See here: https://mdx-bundler-demo.vercel.app/

Reproduction repository:

https://github.com/mattstobbs/mdx-bundler-demo

Problem description:

Vercel doesn't seem to be installing the esbuild dependency correctly. I appreciate this isn't directly connected to a problem with mdx-bundler but I thought I'd ask to see if anyone had seen this before or knew of a way to get around this.

I've also seen other issues with similar errors but the solutions in those issues (usually to downgrade the version of esbuild) don't seem to work in this case.

Thanks!

Suggested solution:

pakatagoh commented 2 years ago

@mattstobbs rolling back to a prev version of esbuild worked for me. Not sure why, but I hope to find an explanation somewhere.

Rolled back based on a issue I found here: https://github.com/hashicorp/next-mdx-remote/pull/199

My current package.json esbuild and mdx-bundler

"esbuild": "^0.12.9",
"mdx-bundler": "^8.0.1",
mattstobbs commented 2 years ago

Hmm that seems to successfully build but now I'm getting 500 errors. At least it's a different error to dig into now, thanks! 😅

SangeetAgarwal commented 1 year ago

@pakatagoh

"esbuild": "^0.12.9", "mdx-bundler": "^8.0.1",

This seemed to have fixed my issue magically, I was struggling with this for the past two days.

mihaiandrei97 commented 12 months ago

The fix was adding "esbuild": "^0.19.5", for me