Marp CLI with nextjs

[ruthkangyr]

Hi,

Im trying to use the marpCli in my nextjs webpage to obtain the output (pdf or pptx). I did this but it does not work.

const tempMarkdownPath = join(tmpdir(), ${uuidv4()}.md)
await writeFile(tempMarkdownPath, markdownContent)

 
const tempPdfPath = join(tmpdir(), ${uuidv4()}.pdf)
const output = await marpCli([tempMarkdownPath, '--pdf', '--output', tempPdfPath])

Can i ask if there are some working examples of this implementation to use, or do is there any suggestion on this case? Thank you

[yhatt]

If you are attempting to run Marp CLI on the server side with Next.js App Router, adding @marp-team/marp-cli pacakge to the serverComponentsExternalPackages setting in next.config.js may make it work correctly.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['@marp-team/marp-cli'],
  },
}

export default nextConfig

[ruthkangyr]

Hello, I am deploying my web application to vercel but I think there will be issues with CHROME_PATH etc.

The CHROME_PATH environment variable must be set to a Chrome/Chromium executable no older than Chrome stable.

Error during conversion: Failed converting Markdown. (You have to install Google Chrome, Chromium, or Microsoft Edge to convert slide deck with current options.)

I just want to check if you happen to know of any solutions that will work for vercel with MarpCLI, instead of just manually setting a CHROME_PATH since it will differ between users. I have looked through the different threads and a lot is targetted at WSL/WSL2.

Thank you!

[yhatt]

Marp CLI example has a solution for getting work Marp CLI on Vercel's build time. Install Chrome and set CHROME_PATH env as its path before building.

For server-side use, you may have to set appropriate CHROME_PATH before calling marpCli(). Example of using chrome-aws-lambda:

import chromium from 'chrome-aws-lambda'

// Store the original CHROME_PATH environment variable
const { CHROME_PATH } = process.env

try {
  // Set the CHROME_PATH environment variable to the path of the Chromium binary
  process.env.CHROME_PATH = await chromium.executablePath
  
  await marpCli(/* ... */)
} finally {
  // Restore the original CHROME_PATH environment variable
  process.env.CHROME_PATH = CHROME_PATH
}

[ruthkangyr]

sorry just to check, is this the line I have to add to package.json for build? or if I'm using server side then I won't need to do this? because just setting CHROME_PATH before calling marpCli() doesn't work

MARP_USER=root CHROME_PATH=$(npx -y @puppeteer/browsers@latest install chrome@stable --path $(realpath ./tmp) | awk '{print $2}')

[yhatt]

It's not possible to provide a clear answer because I could not know how your Next.js app uses Marp CLI specifically. Could you share a minimal reproducible Next.js project?

For instance, if Marp CLI is being used for rendering pages by App Router, the Chrome executable binary must be findable at the time of the initial app build. If the CHROME_PATH env is not set during build, the build and deployment will fail. (https://vercel.com/docs/projects/environment-variables)

So this setting should not be necessary if your application has already been built and deployed.

In cases where Marp CLI is run on the server side, such as with API routes, it is necessary to set the browser path with CHROME_PATH env at server runtime.

Note

It's well known that running a headless Chrome browser on the Vercel infrastructure is difficult due to a size limit of 50 MB for the build result.
https://gist.github.com/kettanaito/56861aff96e6debc575d522dd03e5725

The chrome-aws-lambda package, mentioned at the example provided before, has not been maintained for some time, and may cause errors due to incompatibility with the Chrome version required by the latest Marp CLI. @sparticuz/chromium (or @sparticuz/chromium-min to keep the build size limit) is a good alternative.

[ruthkangyr]

thank you so much!! I'm using MarpCLI on server side and I got it to work by setting the CHROME_PATH on build as suggested and I think like you mentioned, the issue was with the chrome-aws-lambda package, after switching to @sparticuz/chromium-min it worked!!