search

harlan-zw / nuxt-seo

The complete SEO solution for Nuxt.
https://nuxtseo.com
MIT License
1.07k stars 70 forks source link

Using `defineOgImageStatic()` or `<OgImageStatic />` with documentdriven causes 404's #60

Closed BillyBouman-2B-IT closed 10 months ago

BillyBouman-2B-IT commented 1 year ago

Describe the bug

Using either defineOgImageStatic() or <OgImageStatic /> in the app.vue causes document driven pages to serve a 404 when navigating to them. navigating to a page directly however works.

Contents of app.vue

<template>
  <SeoKit />
  <OgImageStatic />
  <NuxtPage />
</template>

Contents of nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config

const environment = process.env.ENV || 'production'
export default defineNuxtConfig({
  extends: [
    '@nuxt-themes/alpine',
    'nuxt-seo-kit'
  ],
  runtimeConfig: {
    public: {
      // as written in https://github.com/harlan-zw/nuxt-og-image#ssg-images
      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://2b-it.nl',
    }
  },
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
  build: { transpile: ['@fortawesome/vue-fontawesome'], },
  components: [
    { path: 'components', global: true },
  ],
  modules: [
    '@nuxt/content',
    '@nuxtjs/tailwindcss',
    '@nuxt/image-edge',
    '@zadigetvoltaire/nuxt-gtm',
  ],
  robots: {
    UserAgent: '*',
    Disallow: '',
    Sitemap: (process.env.NUXT_PUBLIC_SITE_URL || 'https://2b-it.nl') + '/sitemap.xml',
  },
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css',
    '@/assets/css/fonts.scss',
    '@/assets/css/main.scss'
  ],
  content: {
    documentDriven: true
  },
  gtm: {
    id: 'GTM-XXXXXX', // Your GTM single container ID, array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy'] or array of objects [{id: 'GTM-xxxxxx', queryParams: { gtm_auth: 'abc123', gtm_preview: 'env-4', gtm_cookies_win: 'x'}}, {id: 'GTM-yyyyyy', queryParams: {gtm_auth: 'abc234', gtm_preview: 'env-5', gtm_cookies_win: 'x'}}], // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy']
    // queryParams: {
    // Add URL query string when loading gtm.js with GTM ID (required when using custom environments)
    // gtm_auth: 'AB7cDEf3GHIjkl-MnOP8qr',
    // gtm_preview: 'env-4',
    // gtm_cookies_win: 'x',
    // },
    defer: true, // Script can be set to `defer` to speed up page load at the cost of less accurate results (in case visitor leaves before script is loaded, which is unlikely but possible). Defaults to false, so the script is loaded `async` by default
    // compatibility: false, // Will add `async` and `defer` to the script tag to not block requests for old browsers that do not support `async`
    // nonce: '2726c7f26c', // Will add `nonce` to the script tag
    enabled: environment === 'production', // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
    // debug: true, // Whether or not display console logs debugs (optional)
    // loadScript: true, // Whether or not to load the GTM Script (Helpful if you are including GTM manually, but need the dataLayer functionality in your components) (optional)
    // enableRouterSync: true, // Pass the router instance of your app to automatically sync with router (optional)
    // ignoredViews: ['homepage'], // Don't trigger events for specified router names (optional)
    // trackOnNextTick: false, // Whether or not call trackView in Vue.nextTick
    // devtools: true, // (optional)
  }
})

Reproduction

https://deploy-preview-13--nimble-dragon-5ad79d.netlify.app/ and navigate to artikelen or contact. Navigating to https://deploy-preview-13--nimble-dragon-5ad79d.netlify.app/contact directly instead works.

https://2b-it.nl/ is working correctly, only change is that I've removed references to .

System / Nuxt Info

System:
    OS: macOS 13.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 248.67 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
Binaries:
    Node: 19.9.0 - /usr/local/bin/node
    npm: 9.6.4 - /usr/local/bin/npm
Browsers:
    Chrome: 113.0.5672.126
    Firefox Developer Edition: 114.0
    Safari: 16.4
- Operating System: `Darwin`
- Node Version:     `v19.9.0`
- Nuxt Version:     `3.5.0`
- Nitro Version:    `2.4.0`
- Package Manager:  `npm@9.6.4`
- Builder:          `vite`
- User Config:      `extends`, `runtimeConfig`, `app`, `build`, `components`, `modules`, `robots`, `css`, `content`, `gtm`
- Runtime Modules:  `@nuxt/content@2.6.0`, `@nuxtjs/tailwindcss@6.7.0`, `@nuxt/image-edge@1.0.0-28059208.2abef1b`, `@zadigetvoltaire/nuxt-gtm@0.0.12`
- Build Modules:    `-`
harlan-zw commented 1 year ago

Hi @BillyBouman-2B-IT, thanks for the issue.

My personal site uses document-driven mode with static og images without an issue so I'm not exactly sure what steps are needed for reproduction.

Would it be possible to create a reproduction in StackBlitz and I'll be able to sort out the issue a lot quciker?

BillyBouman-2B-IT commented 1 year ago

Would it be possible to create a reproduction in StackBlitz and I'll be able to sort out the issue a lot quciker?

https://stackblitz.com/edit/nuxt-starter-krqsax?file=app.vue Images aren't being generated on Stackblitz sadly. I've spend some time trying to get them to work, without success.

Also, I think the problem only occurs on the generated version using npm run generate. It looks like everything is working as intended with npm run dev.

BillyBouman-2B-IT commented 1 year ago

I can confirm that the problem only occurs with npm run generate. When looking at the OG Image Playground using npm run dev the OG image is correctly being displayed on tab OgImageBasic.vue and Preview SVG but not on Preview PNG.

afbeelding

Looking at the logs I see the following:

[nuxt] [request error] [unhandled] [500] WASM has not been initialized. Call initialize function.                                         1:02:42 PM
  at createSvg2png (./node_modules/svg2png-wasm/dist/index.mjs:299:11)  
  at svg2png (./node_modules/svg2png-wasm/dist/index.mjs:327:19)  
  at svg2png (./.nuxt/dev/index.mjs:5912:16)  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1285:19)  
  at async Server.toNodeHandle (./node_modules/h3/dist/index.mjs:1360:7)

I've found https://github.com/harlan-zw/nuxt-og-image/issues/59 and followed up your advice using npm install --save-dev nuxt-og-image@beta. Now, when I visit the OG Image Playground I'm greeted by a familiar error:

[Vue warn]: Component <Anonymous> is missing template or render function.                                                                 1:09:01 PM
[1:09:01 PM] [nuxt] [request error] [unhandled] [404]  (404 Island component not found: undefined (/__nuxt_island/OgImageBasic:13KXIFfkqZ?props=%7B%22component%22:%22OgImageBasic%22,%22width%22:1200,%22height%22:630,%22cacheTtl%22:86400000,%22path%22:%22/%22,%22title%22:%22D%C3%A9+partner+voor+%C3%A1l+uw+IT+oplossingen%22,%22provider%22:%22satori%22,%22static%22:true,%22background%22:%22linear-gradient(to+right,+%23259fbe,+%230C3148)%22,%22color%22:%22white%22,%22description%22:%222B-IT+een+technologische+partner+voor+het+midden-+en+kleinbedrijf+(MKB)+%26+gespecialiseerd+in+het+cre%C3%ABren+en+beheren+van+webapplicaties+op+maat.%22,%22requestOrigin%22:%22http://localhost:3000%22%7D))
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async ./.nuxt/dev/index.mjs:6747:18  
  at async Object.handler (./node_modules/h3/dist/index.mjs:1285:19)  
  at async toNodeHandle (./node_modules/h3/dist/index.mjs:1360:7)  
  at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17)  
  at async $fetchRaw2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:206:26)  
  at async $fetch2 (./node_modules/ofetch/dist/shared/ofetch.d438bb6f.mjs:239:15)  
  at async Object.createVNode (./.nuxt/dev/index.mjs:6032:18)  
  at async Object.createSvg (./.nuxt/dev/index.mjs:6051:20)  
  at async Object.createPng (./.nuxt/dev/index.mjs:6027:17)

The components directive referenced in the other issue is not present, so it seems something else is causing the error now.

https://stackblitz.com/edit/nuxt-starter-krqsax (I'm not able to get the images working)

During deployment on my production environment using Netlify:

1:23:44 PM: [log] [nitro]   ├─ /__og_image__/og.png (120ms) (Error: [500] Failed to create og image:  (404 Island component not found: undefined (/api/og-image-html?path=/&options=%7B%22component%22:%22OgImageBasic%22,%22width%22:1200,%22height%22:630,%22cacheTtl%22:86400000,%22path%22:%22/%22,%22title%22:%22D%C3%A9+partner+voor+%C3%A1l+uw+IT+oplossingen%22,%22provider%22:%22satori%22,%22static%22:true,%22background%22:%22linear-gradient(to+right,+%23259fbe,+%230C3148)%22,%22color%22:%22white%22,%22description%22:%222B-IT+een+technologische+partner+voor+het+midden-+en+kleinbedrijf+(MKB)+%26+gespecialiseerd+in+het+cre%C3%ABren+en+beheren+van+webapplicaties+op+maat.%22,%22requestOrigin%22:%22http://localhost%22%7D)))
harlan-zw commented 10 months ago

This should be solved in v2 of the module (Nuxt OG Image v3).