slidevjs / slidev

Presentation Slides for Developers
https://sli.dev
MIT License
32.66k stars 1.31k forks source link

can not export to pdf #116

Closed ahangchen closed 1 year ago

ahangchen commented 3 years ago

I try to use npx slidev export to export pdf, but it always fails on:

 ▲ rendering █████░░░░░░░░░░░░░░░░░░░░░░░░░ 1/6page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:12445/1?print", waiting until "networkidle"
============================================================
Note: use DEBUG=pw:api environment variable to capture Playwright logs.
Error
    at Object.captureStackTrace (/Users/cwh/Mission/coding/slidev/node_modules/playwrigh)
    at Connection.sendMessageToServer (/Users/cwh/Mission/coding/slidev/node_modules/pla)
    at Proxy.<anonymous> (/Users/cwh/Mission/coding/slidev/node_modules/playwright-chrom)
    at /Users/cwh/Mission/coding/slidev/node_modules/playwright-chromium/lib/client/fram5
    at Frame._wrapApiCall (/Users/cwh/Mission/coding/slidev/node_modules/playwright-chro)
    at Frame.goto (/Users/cwh/Mission/coding/slidev/node_modules/playwright-chromium/lib)
    at /Users/cwh/Mission/coding/slidev/node_modules/playwright-chromium/lib/client/page0
    at Page._attributeToPage (/Users/cwh/Mission/coding/slidev/node_modules/playwright-c)
    at Page.goto (/Users/cwh/Mission/coding/slidev/node_modules/playwright-chromium/lib/)
    at go (/Users/cwh/Mission/coding/slidev/node_modules/@slidev/cli/dist/export-WGBEP3O)
    at exportSlides (/Users/cwh/Mission/coding/slidev/node_modules/@slidev/cli/dist/expo)
    at async Object.handler (/Users/cwh/Mission/coding/slidev/node_modules/@slidev/cli/d{
  name: 'TimeoutError'
antfu commented 3 years ago

Can't reproduce, what's the content of your slides, does it do with any web requests?

LeadcodeDev commented 3 years ago

I have the same error with the default install : • yarn create slidev (don't run install dependencies & start) • yarn install • yarn export

cf : https://fr.sli.dev/guide/#creation-de-votre-premiere-presentation The default slide content is the same as default slide when we create an new project.

OS : Windows Node : v.14.16.1 Npm : v.6.14.12 Yarn : 1.22.10

ahangchen commented 3 years ago

May be caused by unreachable internet connetion, when rendering with some plugins. I turn on a global proxy and the progressbar moves.

mariomurrent-softwaresolutions commented 3 years ago

How did you turn on a global proxy?

I have the same timeout issue, when running the build ... export to PDF works fine

@antfu Is it possible to increase the timeout a bit?

antfu commented 3 years ago

Is it possible to increase the timeout a bit?

$ slidev export --timeout 3000

You can also try to disable the remote assets downloading

---
remoteAssets: false
---
mariomurrent-softwaresolutions commented 3 years ago

I already have the remoteAssets: false :) ... But sometimes it runs into the timeout .. so no idea why

madlogos commented 3 years ago

Same problem with macOS 10.15.7, node 16.2.0, npm 7.14.0, and the latest slidevjs 0.15.0.

I have set remoteAssets false in front matter and timeout 9999999 in the cli, but still ran into timeout. It seems the command only accepts timeout 30000ms as maximum.

When I tried to run slidev build, it also ran into timeout error when trying to render after finishing building with vite.

antfu commented 3 years ago

Might due to the Twitter scripts (was 'sync' loading). Changed to async in v0.16.0, can you guys try the new version out and see if it's a fix for you? Thanks

madlogos commented 3 years ago

Hi @antfu : I tried v0.16.0 out, however, the issue is not yet fixed.

=========================== logs ===========================
navigating to "http://localhost:12445/1?print", waiting until "networkidle"
============================================================
Note: use DEBUG=pw:api environment variable to capture Playwright logs.
Error
    at Object.captureStackTrace (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/utils/)
    at Connection.sendMessageToServer (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/)
    at Proxy.<anonymous> (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/client/channe)
    at /Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/client/frame.js:102:65
    at Frame._wrapApiCall (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/client/chann)
    at Frame.goto (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/client/frame.js:100:)
    at /Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/client/page.js:303:60
    at Page._attributeToPage (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/client/pa)
    at Page.goto (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/playwright-chromium/lib/client/page.js:303:21)
    at go (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/@slidev/cli/dist/export-R4KG3V6E.js:78:16)
    at exportSlides (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/@slidev/cli/dist/export-R4KG3V6E.js:90:13)
    at async build (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/@slidev/cli/dist/build-2V4QQ7IC.js:79:5)
    at async Object.handler (/Users/madlogos/Documents/Projects/slidev_demo/node_modules/@slidev/cli/dist/cli.js:133:3) {
  name: 'TimeoutError'
}
antfu commented 3 years ago

@madlogos Can you share your project?

ahangchen commented 3 years ago

How did you turn on a global proxy?

I have the same timeout issue, when running the build ... export to PDF works fine

@antfu Is it possible to increase the timeout a bit?

It's slow to access some foreign resources in some coutries, so a network proxy for low latency is required to meet the timeout limitation.

mariomurrent-softwaresolutions commented 3 years ago

How did you turn on a global proxy?

I have the same timeout issue, when running the build ... export to PDF works fine

@antfu Is it possible to increase the timeout a bit?

It's slow to access some foreign resources in some coutries, so a network proxy for low latency is required to meet the timeout limitation.

Have u tried to set a higher timeout?

madlogos commented 3 years ago

@madlogos Can you share your project?

I used exactly the built-in demo.

When I applied global proxy to override GFW, the build action succeeded. So it's quite clear that the blocked internet component (twitter widget.js or even something on raw.githubusercontent.com) stopped the script. Maybe consider increasing the exception tolerance to let it go?

Plus, twitter widget.js is injected into index.html by default. Maybe change it to optional (not included at all unless a Tweet widget is used)?

antfu commented 3 years ago

twitter widget.js is injected into index.html by default.

Only when you use <Tweet/> in your slides, which in this case, it's used in the starter template.

Maybe consider increasing the exception tolerance to let it go?

I don't know. I don't think it makes sense to export the slides with some images / content failed to load. But maybe we could improve the error log to show the pending resources that causes the failing.

madlogos commented 3 years ago

twitter widget.js is injected into index.html by default.

Only when you use <Tweet/> in your slides, which in this case, it's used in the starter template.

So how can I remove twitter widgets.js from the slides? I removed all the widgets from the demo slides.md, but still had https://platform.twitter.com/widgets.js in the page rendered.

nakhleh commented 3 years ago

The demo deck has more in the way of remote assets than just twitter. The unsplash backgrounds, sli.dev logo images used in the animation, etc. When you view these in the browser (dev or build mode), you use your browser's normal proxy. When you try to export to PDF, it uses the headless playwright/chrome package, which doesn't. Looks to me like the export launch command (https://github.com/slidevjs/slidev/blob/main/packages/slidev/node/export.ts#L76) should be modified to take a proxy in as an option (https://playwright.dev/docs/api/class-browser/#browser-new-context) . But, not sure how sli.devs would prefer to do it... front matter option? slidev cli option?

antfu commented 3 years ago

Probably cli options if we want to have proxy config

Saul-Mirone commented 3 years ago

I also run into this issue and after I turned off my proxy, it still fails...

Saul-Mirone commented 3 years ago

I just turn the monaco editor config to false, and everything works :)

ysun commented 2 years ago

Probably cli options if we want to have proxy config

I met the same issue as mentioned by @mariomurrent-softwaresolutions . I found it is kindly due to no proxy when running slidev export. So please add proxy config for slidev. Or let slidev can make use of environment various http_proxy.

antfu commented 2 years ago

let slidev can make use of environment various http_proxy.

PR welcome :)

yanyongyu commented 2 years ago

this error always occurs when playwright first time goto the page and the page is still building

https://github.com/slidevjs/slidev/blob/209dd412b151afc8b051bb57963a0198b334f980/packages/slidev/node/export.ts#L97-L99

in my case, fixed by adding the timeout option instead of using page.waitForTimeout, page.goto has its own timeout with default 30000 ms. Set slidev cli option timeout to a larger value like 60000 or 0 to disable timeout

await page.goto(url, {
  timeout: timeout,
  waitUntil: 'networkidle',
})

playwright docs says

Note that page.waitForTimeout() should only be used for debugging.

tonai commented 2 years ago

@yanyongyu now you can set the timeout value for page.goto with the --timeout CLI option https://sli.dev/guide/install.html#command-line-interface-cli

yanyongyu commented 2 years ago

LGTM

pluveto commented 2 years ago

Add proxy to playwright.

node_modules\@slidev\cli\dist\export-LOKLMK66.js 67:

  const browser = await chromium.launch({
    proxy: {
        server: 'http://127.0.0.1:7890'
    }
});
immorBen commented 2 years ago

I've experienced the same, maybe can try to put the .md file and public resources under the (children) directory where the node.exe is installed.

eric-burel commented 2 years ago

Can reproduce on Ubuntu 22, it's totally random though. Using a short timeout is better, as retrying fixes the issue most often. So it seems that if it should fail, it will fail, and if it should not, it quickly export. Feels like a connection fails and then the export is doomed to fail whatever the timeout does.

yonkeltron commented 1 year ago

So I have also hit this issue with a variety of presentations. I can't tell whether they are because of the high number of slides or whether it's because they use other things such as the Tweet component. Or maybe it's having local images? Either way my trouble comes about trying to load the deck in the browser AT ALL. In other words, this also happens in Chrome when I run yarn dev. I don't know if that means anything in terms of my ability to troubleshoot or reproduce the issue at all.

I also got this error when running yarn export:

  ◆ rendering...page.goto: Timeout 30000ms exceeded.
=========================== logs ===========================
navigating to "http://localhost:12445/print?print", waiting until "networkidle"
============================================================
    at go (/Users/USER/Documents/software-checklist/node_modules/@slidev/cli/dist/export-YW4ZBY3A.js:142:16)
    at genPagePdf (/Users/USER/Documents/software-checklist/node_modules/@slidev/cli/dist/export-YW4ZBY3A.js:162:11)
    at exportSlides (/Users/USER/Documents/software-checklist/node_modules/@slidev/cli/dist/export-YW4ZBY3A.js:226:)
    at async Object.handler (/Users/USER/Documents/software-checklist/node_modules/@slidev/cli/dist/cli.js:326:14) {
  name: 'TimeoutError'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Anything I can do to help debug this or test anything out?

Thanks, +Jonathan

tonai commented 1 year ago

@yonkeltron there is a default timeout in playwright when it waits for the "networkidle" event. If you have a lot of slides it can sometimes exceed this time. In that case you can try to increase that timeout by using the --timeout CLI option: https://sli.dev/guide/install.html#slidev-export-entry

yonkeltron commented 1 year ago

@yonkeltron there is a default timeout in playwright when it waits for the "networkidle" event. If you have a lot of slides it can sometimes exceed this time. In that case you can try to increase that timeout by using the --timeout CLI option: https://sli.dev/guide/install.html#slidev-export-entry

Yes that timeout issue is definitely present when trying to export or build but it also happens when I first load the presentation in the browser. When opening the presentation in Chrome, the devtools say that the initial GET for http://localhost:3030 takes exactly a minute. Therefore, setting the --timeout option to 120000 does the trick. However every time I need to restart the server with yarn dev it is a 60-second wait for the presentation to show up in the browser tab which opens.

Anything else I can do to provide more info?

EnixCoda commented 1 year ago

Disabling monaco for production and setting--timeout 60000 works for me!

zhang13pro commented 1 year ago

Disabling monaco for production and setting--timeout 60000 works for me!

is also useful for me 🧓

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.