[REQUEST] Please, make it work with Nextjs 13

[ambrosil]

What would you like to have implemented?

It would be awesome if you could add support for Next.js 13.
What happens right now is that the chromium.br file just disappear during the build with webpack 5 (i think cuz *br files are not handled by the webpack config, but i'm not completely sure), so i get this error when launching puppeteer server side in a Next.js app:

Error: The input directory "/var/task/.next/server/bin" does not exist.
    at Chromium.executablePath (/var/task/.next/server/chunks/867.js:45085:19)
    at printPdf (/var/task/.next/server/app/api/pdf/route.js:772:47)
    at GET (/var/task/.next/server/app/api/pdf/route.js:718:27)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /var/task/.next/server/chunks/778.js:6189:37

Can you help me, please ?

[Sparticuz]

@ambrosil Must be listed as a webpack external

[ambrosil]

ok, you mean like this ?

config.externals.push('@sparticuz/chromium')

this doesn't seem to work ...

[Sparticuz]

@ambrosil No idea, I don't use Web pack, but there is a link to a thread on the main page with more information., sorry I'm on Mobile, otherwise I'd find the info

[ambrosil]

ok i'll try, thanks for the support 👍

[LuanCKRG]

Do you have any updates or links for read?

[Sparticuz]

#24 (comment)

[LuanCKRG]

Okay, the idea is to use a webpack, but config.externals.push('@sparticuz/chromium') doesn't work, so do you have any way to do it in nextjs 13?

[Sparticuz]

That code looks wrong. The externals documentation says to do something like

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};

[LuanCKRG]

Probably in Node this works but in Next it's a bit more complicated. I'll take a look at the docs, if I find something I'll bring it here

[williampeterpaul]

I think to define externals in Next.js you expose the webpack config in next.config.js for example

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important: return the modified config
    if (isServer) {
      config.externals = ['@sparticuz/chromium', ...config.externals];
    }
    return config;
  }
};

However this doesn't seem to fix the error for me, I'm still getting:

Error: The input directory "/var/task/node_modules/@sparticuz/chromium/bin" does not exist.
    at Chromium.executablePath (/var/task/node_modules/@sparticuz/chromium/build/index.js:159:19)

When deployed on Vercel. Has anyone else made progress with this?

[Sparticuz]

You may have to use the @sparticuz/chromium-min package and host the binary separately from your app

[williampeterpaul]

Appreciate the reply. I did try chromium-min but unfortunately my requests take too long and timeout. I think Vercel has a max execution time of 60 seconds.

[Sparticuz]

I do understand wanting to run your code together, but it's my advice that you decouple any chromium interactions from your users and maybe just run this separate. SQS with vanilla Lambda. All these build systems do things differently. That said, if you do figure it out, I'd be happy to add some info in the readme, or add examples.

[williampeterpaul]

Off-topic but found a way to work with chromium-min. The 60 second timeout was being caused by an unnecessary await browser.close(); at end end of my code block. Removing this improved execution time significantly. Thanks again for help @Sparticuz

[Sparticuz]

The 60 second timeout was being caused by an unnecessary await browser.close(); at end end of my code block.

I've heard that disabling the graphics stack will fix this bug

[masterbater]

https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages

[mordechaim]

As @masterbater said, the config should be:

const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: [
      'puppeteer-core',
      '@sparticuz/chromium'
    ]
  }
}

[foufrix]

As @masterbater said, the config should be:

const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: [
      'puppeteer-core',
      '@sparticuz/chromium'
    ]
  }
}

Does this work when trying to run puppeteer using Vercel cloud functions?

[mordechaim]

Does this work when trying to run puppeteer using Vercel cloud functions?

Yes, but I had to use chromium-min instead since it reached the 50MB limit. See this article on how to do it.

Puppeteer also took quite long to load my heavy page, which reached the max 10 second execution time of Vercel cloud, so I'm now using Vercel Pro with increased maxDuration route segment config.

[nayanbari]

As @masterbater said, the config should be:

const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: [
      'puppeteer-core',
      '@sparticuz/chromium'
    ]
  }
}

Does this work when trying to run puppeteer using Vercel cloud functions?

Thanks @foufrix above solution worked for me.