Avoid installing playwright if we're not using Screenshots

MuhammadM1998 commented 6 months ago

Details

Hello, I'm using the latest version of the module 2.0.0-beta.50 and I'm using a static OG image, yet in the CI it installs playwright when running nuxi prepare. This doesn't happen when running the same command locally Screenshot 2023-12-13 201044

This is my nuxt.config

export default defineNuxtConfig({
  modules: ['@nuxtseo/module'],

  site: {
    url: 'lorem',
    name: 'lorem',
    description: `lorem`,
    defaultLocale: 'lorem',
    identity: { type: 'Organization' },
    twitter: 'lorem',
    trailingSlash: true,
  },
})

App.vue

<script setup>
  useSeoMeta({
    applicationName: 'lorem',
    twitterDescription: 'lorem',
    ogType: 'website',
    ogImage: '/og-image.png',
    twitterImage: '/og-image.png',
    twitterCard: 'summary',
  })
</script>

harlan-zw commented 6 months ago

Hi @MuhammadM1998

I plan to do a lookup when the module starts to try and programmatically figure out if you need it. Always installing it in a CI avoids issues in the meantime.

If you're using a static image and you aren't using defineOgImage({ url: '<path>', width: '<width>', height: '<height>' }), then I'd advise you to disable the module. (I'd suggest looking at this composable if you haven't yet)

export define defineNuxtConfig({
  ogImage: {
    enabled: false,
  }
})

If you do want to use the above, then you can disable the installation by following https://nuxtseo.com/og-image/guides/chromium#prerenderer-ci-chromium

Let me know if you have any questions on that

MuhammadM1998 commented 6 months ago

Thanks I'll check out those and get back to you. Side note. Current static og image is a placeholder and we're planning to use the og module ofcourse

MuhammadM1998 commented 6 months ago

I've disabled the prerendering and it did the job for me. I don't know if the issue should be closed or wait until you implement that auto-detection functionality so I'll leave that to you @harlan-zw. Thanks again 🙏

This is my current setup if anyone stumbles into this.

App.vue

<script setup>
  useSeoMeta({
    applicationName: 'lorem',
    twitterDescription: 'lorem',
    twitterCard: 'summary',
  })

  defineOgImage({ url: '/og-image.png' })
</script>

export default defineNuxtConfig({
  modules: ['@nuxtseo/module'],

  site: {
    url: 'lorem',
    name: 'lorem',
    description: `lorem`,
    defaultLocale: 'lorem',
    identity: { type: 'Organization' },
    twitter: 'lorem',
    trailingSlash: true,
  },

  ogImage: { compatibility: { prerender: { chromium: false } } },
})

zernonia commented 5 months ago

I had the same log as well. Was using defineOgImageComponent, which is using Satori right? Does that also require playwright to be installed?

https://github.com/zernonia/vue0/blob/43b22a15ac8e78c7e71670ddaf02b04d8a5180ed/pages/t/%5Bslug%5D.vue#L144-L148

Also, this link is broken https://nuxtseo.com/og-image/guides/chromium#prerenderer-ci-chromium 😬

harlan-zw commented 5 months ago

I had the same log as well. Was using defineOgImageComponent, which is using Satori right? Does that also require playwright to be installed?

zernonia/vue0@43b22a1/pages/t/%5Bslug%5D.vue#L144-L148

Also, this link is broken nuxtseo.com/og-image/guides/chromium#prerenderer-ci-chromium 😬

Looks like you caught me in the middle of updating the docs, should be fixed :smile:

defineOgImageComponent will use the default renderer unless configured otherwise, the default renderer is satori, so safe to disable

The only reason it's like this at the moment is to provide slightly better DX for people wanting to use browser screenshots but that should only be a minority of people, so will try and solve before the v3 stable

harlan-zw commented 5 months ago

Fixed in the latest RC :) Let me know if you have any issues

MuhammadM1998 commented 5 months ago

Thanks! I'll try it out and report back

MuhammadM1998 commented 4 months ago

@harlan-zw In the same setup above I've removed the following line from nuxt.config and the issue is still there

ogImage: { compatibility: { prerender: { chromium: false } } }

nuxt-og-image 3.0.0-rc.23 nuxt-seo 2.0.0-rc.3

harlan-zw commented 4 months ago

Not entirely sure how that is possible unless you're rendering an image using the chromium renderer? :thinking:

Can you share where in your logs it's installed?

MuhammadM1998 commented 4 months ago

It's the same setup as above I'm using a static image and the same logs in github ci as the one in the description. I'll put them here when I get back on the PC

MuhammadM1998 commented 4 months ago

I've tried to reproduce in a new repo with only nuxt & nuxtjs/seo and the issue doesn't appear. But it's there in my full project. This is the complete log of the pnpm install step the github action. The installed modules are there. If you suspect any that can cause a problem inform me and I'll try to reproduce with it

Prepare all required actions
Getting action download info
Download action repository 'actions/setup-node@v4' (SHA:60edb5dd545a775178f5[2](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:2)52478[3](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:3)378180af0d1f8)
Run ./.github/actions/setup
Run echo *** | sed 's/./&‌/g'
g‌h‌p‌_‌Q‌l‌z‌q‌m‌6‌i‌8‌k‌G‌P‌f‌u‌c‌e‌0‌Z‌u‌E‌O‌R‌y‌N‌O‌X‌p‌G‌R‌m‌w‌[4](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:4)‌U‌P‌x‌C‌P‌
h‌t‌t‌p‌s‌:‌/‌/‌temp.‌c‌o‌m‌
Run corepack enable
Run actions/setup-node@v4
Environment details
/usr/local/bin/pnpm store path --silent
/home/runner/.local/share/pnpm/store/v3
Received 117440512 of 2[8](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:9)4342841 (41.3%), 111.9 MBs/sec
Cache Size: ~271 MB (284342841 B)
/usr/bin/tar -xf /home/runner/work/_temp/8f63ce47-9132-4634-b454-5311f578b71f/cache.tzst -P -C /home/runner/work/website/website --use-compress-program unzstd
Received 284342841 of 284342841 (100.0%), 135.4 MBs/sec
Cache restored successfully
Cache restored from key: node-cache-Linux-pnpm-1af4c523108221710b02cb4741c8b846d376f6fe7de273208c44ab145ef9e2af
Run pnpm install
 WARN  Unsupported engine: wanted: {"node":">=20.11.1"} (current: {"node":"v18.19.0","pnpm":"8.15.2"})
Lockfile is up to date, resolution step is skipped
Progress: resolved 1, reused 0, downloaded 0, added 0
Packages: +[12](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:14)64
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1264, reused 446, downloaded 0, added 0
Progress: resolved 1264, reused 1263, downloaded 0, added 0
Progress: resolved 1264, reused 1263, downloaded 0, added 457
Progress: resolved 1264, reused 1263, downloaded 0, added 1183
Progress: resolved 1264, reused 1263, downloaded 0, added 1264, done

devDependencies:
+ @antfu/eslint-config 2.6.4
+ @iconify/json 2.2.165
+ @meilisearch/instant-meilisearch 0.16.0
+ @nuxt/image 1.3.0
+ @nuxt/ui <- @nuxt/ui-edge 2.[13](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:15).0-28465310.300861a
+ @nuxtjs/fontaine 0.4.1
+ @nuxtjs/i18n 8.0.0
+ @nuxtjs/seo 2.0.0-rc.3
+ @sidebase/nuxt-auth 0.6.7
+ @vueuse/nuxt 10.7.2
+ eslint 8.56.0
+ eslint-config-prettier 9.1.0
+ eslint-plugin-tailwindcss 3.[14](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:16).2
+ husky 9.0.11
+ lint-staged 15.2.2
+ nuxt 3.10.2
+ nuxt-prepare 1.1.0
+ nuxt-swiper 2.0.0-0
+ prettier 3.2.5
+ typescript 5.3.3
+ vue-instantsearch 4.13.8
+ vue-tsc 1.8.27

> @temp/website@0.0.1 postinstall /home/runner/work/website/website
> nuxi prepare && husky install

[info] [nuxt-og-image] Ensuring Chromium install for og:image generation...
npm WARN exec The following package was not found and will be installed: playwright@1.41.2
╔═══════════════════════════════════════════════════════════════════════════════╗
║ WARNING: It looks like you are running 'npx playwright install' without first ║
║ installing your project's dependencies.                                       ║
║                                                                               ║
║ To avoid unexpected behavior, please install your dependencies first, and     ║
║ then run Playwright's install command:                                        ║
║                                                                               ║
║     npm install                                                               ║
║     npx playwright install                                                    ║
║                                                                               ║
║ If your project does not yet depend on Playwright, first install the          ║
║ applicable npm package (most commonly @playwright/test), and                  ║
║ then run Playwright's install command to download the browsers:               ║
║                                                                               ║
║     npm install @playwright/test                                              ║
║     npx playwright install                                                    ║
║                                                                               ║
╚═══════════════════════════════════════════════════════════════════════════════╝
Downloading Chromium 121.0.6167.57 (playwright build v1097) from https://playwright.azureedge.net/builds/chromium/1097/chromium-linux.zip
|                                                                                |   0% of 152.8 MiB
|■■■■■■■■                                                                        |  10% of 152.8 MiB
|■■■■■■■■■■■■■■■■                                                                |  20% of 152.8 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■                                                        |  [30](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:35)% of 152.8 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                                |  40% of 152.8 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                        |  50% of 152.8 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                |  60% of 152.8 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                        |  70% of 152.8 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                |  80% of 152.8 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■        |  90% of 152.8 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 152.8 MiB
Chromium 121.0.6167.57 (playwright build v1097) downloaded to /home/runner/.cache/ms-playwright/chromium-1097
Downloading FFMPEG playwright build v1009 from https://playwright.azureedge.net/builds/ffmpeg/1009/ffmpeg-linux.zip
|                                                                                |   0% of 2.6 MiB
|■■■■■■■■                                                                        |  10% of 2.6 MiB
|■■■■■■■■■■■■■■■■                                                                |  20% of 2.6 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■                                                        |  30% of 2.6 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                                |  40% of 2.6 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                        |  50% of 2.6 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                                |  60% of 2.6 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                        |  70% of 2.6 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                |  80% of 2.6 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■        |  90% of 2.6 MiB
|■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 2.6 MiB
FFMPEG playwright build v1009 downloaded to /home/runner/.cache/ms-playwright/ffmpeg-1009
[warn] Slow module `nuxt-og-image` took `14680.18ms` to setup.
[warn] Slow module `nuxtseo` took `16115.74ms` to setup.
[info] [sidebase-auth] `nuxt-auth` setup starting
[success] [sidebase-auth] `nuxt-auth` setup done
[info] [nuxt-prepare] Running prepare script `server.prepare`
[success] [nuxt-prepare] Server prepare scripts completed
[info] [nuxt:tailwindcss] Using Tailwind CSS from ~/node_modules/.c12/github_temp_base_i4bfVn20kU/assets/css/tailwind.css
[success] Types generated in .nuxt
install command is deprecated
Done in [31](https://github.com/temp/website/actions/runs/7913063048/job/21599945095#step:3:36).9s

harlan-zw commented 4 months ago

Can you try the latest RC? v2.0.0-rc.8

MuhammadM1998 commented 4 months ago

That did fix it thanks! I was manually bumping nuxt/seo but didn't know it's at rc8. Its mentioned only when you click the versions tab. Don't know if this is intended. Screenshot 2024-02-16 143400

harlan-zw commented 4 months ago

Hmm this is a bit strange :thinking:

nuxt-modules / og-image

Avoid installing playwright if we're not using Screenshots #134

Details