search

harlan-zw / nuxt-seo

The complete SEO solution for Nuxt.
https://nuxtseo.com
1.03k stars 64 forks source link

ogImage works fine when I use it alone, but with nuxt-seo it breaks in svg #280

Closed Leandro-b-03 closed 1 month ago

Leandro-b-03 commented 1 month ago

Describe the bug

Hey there I'm breaking my back to understand why this is happening, I migrated my Vuejs project to Nuxt and started on SEO found out the nuxt-seo and start to implement, it first I was receiving this error:

[nuxt-og-image]  WARN  ReSVG is missing dependencies for environment. Falling back to WASM version, this may slow down PNG rendering.
 ERROR  Cannot start nuxt:  Invalid SVG
  at Object.calculate (node_modules/image-size/dist/types/svg.js:88:15)
  at lookup (node_modules/image-size/dist/index.js:34:53)
  at imageSize (node_modules/image-size/dist/index.js:98:16)
  at getImageDimensions (node_modules/nuxt-seo-experiments/dist/module.mjs:52:10)
  at async getImageMeta (node_modules/nuxt-seo-experiments/dist/module.mjs:27:29)
  at async node_modules/nuxt-seo-experiments/dist/module.mjs:86:24
  at async Promise.all (index 3)
  at async generateTagsFromPublicFiles (node_modules/nuxt-seo-experiments/dist/module.mjs:84:10)
  at async setup (node_modules/nuxt-seo-experiments/dist/module.mjs:416:7)
  at async normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2126:17)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2468:95)
  at async setup (node_modules/@nuxtjs/seo/dist/module.mjs:46:7)
  at async normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2126:17)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2468:95)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:4496:5)
  at async NuxtDevServer._load (node_modules/nuxi/dist/chunks/dev2.mjs:6875:5)
  at async NuxtDevServer.load (node_modules/nuxi/dist/chunks/dev2.mjs:6810:7)
  at async NuxtDevServer.init (node_modules/nuxi/dist/chunks/dev2.mjs:6805:5)
  at async Object.run (node_modules/nuxi/dist/chunks/dev-child.mjs:98:5)
  at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1648:16)
  at async runCommand$1 (node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1639:11)
  at async runMain$1 (node_modules/nuxi/dist/shared/nuxi.6aad497e.mjs:1777:7)

To troubleshoot, I separately installed nuxt-ogImage, which worked well. I also tried installing @resvg/resvg-js, which resolved the initial warning but introduced new issues.

More details:

Dockerfile:

FROM node:lts-alpine

# Set working directory
WORKDIR /vue

# Copy only package files first for efficient caching
COPY package*.json ./

# Install dependencies
RUN apk add --no-cache --update \
    g++ \
    make \
    autoconf \
    automake \
    libtool \
    nasm \
    pkgconf \
    rust \
    cargo

# Install Resvg
RUN npm install @resvg/resvg-js

RUN cargo install wasm-pack

# Install dependencies (including devDependencies for Vite)
RUN npm install
RUN npm audit fix

# Copy the rest of the source code
COPY . .

# Expose the port your app will run on (default for Vite)
EXPOSE 5173

# Define the default command to run your app (adjust if needed)
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5173", "--no-open"]
# CMD ["tail", "-f", "/dev/null"]

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Tetralist',
      htmlAttrs: {
        lang: 'pt'
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { "http-equiv": "Content-Security-Policy", content: "upgrade-insecure-requests" },
        { name: 'author', content: 'Tetralist' },
        { name: 'robots', content: 'index, follow' },
      ],
      link: [
        { name: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { name: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { name: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' },
        { name: 'manifest', href: '/site.webmanifest' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
        { id: 'theme-link', rel: 'stylesheet', type: 'text/css', href: '/themes/lara-light-indigo/theme.css' },
      ],
      script: [
        { id: "cookieyes", type: "text/javascript", src: 'https://cdn-cookieyes.com/client_data/4923d4d6747f6a812579052e/script.js' },
        { id: "google-tag-manager", type: "text/javascript", src: 'https://www.googletagmanager.com/gtag/js?id=G-', async: true },
      ],
    },
    footer: {
      script: [
      ],
    },
  },
  routeRules: {
    '/*': { prerender: true },
  },
  devtools: { enabled: true },
  css: ['@/assets/main.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: [
    '@primevue/nuxt-module',
    "@pinia/nuxt",
    'nuxt-swiper',
    'nuxt-icon',
    "nuxt-gtag",
    "@nuxtjs/seo"
  ],
  gtag: {
    id: 'G-45656421',
    config: {
      linker: {
        domains: ['www.tetralist.com.br']
      }
    }
  },
  primevue: {
    importTheme: { from: '@/presets/pen_color.ts' },
    options: {  
      ripple: true,
      inputVariant: 'filled',
    },
    components: {
      include: '*', // Include all components
    },
    directives: {
      include: '*', // Include all directives
    }
  },
  pinia: {
    storesDirs: ['./stores/**'],
  },
  plugins: [
    { src: '@/plugins/vue3-google-login.client.ts', mode: 'client' }
  ],
  router: {
    options: {
      scrollBehaviorType: 'smooth',
    },
  },
  site: {
    url: 'https://www.tetralist.com.br',
    name: 'Tetralist',
    description: 'Tetralist é um site de listas de produtos e serviços, onde você pode criar e compartilhar listas com seus amigos e familiares.',
    image: '/images/logo.png',
    defaultlocale: 'pt_BR',
  },
  sitemap: {
    include: ['/lista/*', '/categorias/*', '/sobre', '/politica-de-privacidade', '/termos-de-uso'],
  },
});

package.json:

{
  "name": "tetralist-frontend-nuxt",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "start": "nuxt start",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxtjs/seo": "^2.0.0-rc.16",
    "@pinia/nuxt": "^0.5.1",
    "@primevue/themes": "^4.0.1",
    "@stripe/stripe-js": "^4.1.0",
    "chart.js": "^4.4.3",
    "nuxt": "^3.12.4",
    "nuxt-gtag": "^2.1.0",
    "nuxt-icon": "^0.6.8",
    "nuxt-svgo": "^4.0.2",
    "nuxt-swiper": "^1.2.2",
    "pinia": "^2.1.7",
    "primeflex": "^3.3.1",
    "primeicons": "^7.0.0",
    "primevue": "^4.0.1",
    "quill": "^2.0.2",
    "swiper": "^11.1.7",
    "tailwindcss-primeui": "^0.3.4",
    "vue": "latest",
    "vue3-google-login": "^2.0.29",
    "ws": "^8.12.1"
  },
  "devDependencies": {
    "@primevue/nuxt-module": "^4.0.1",
    "autoprefixer": "^10.4.19",
    "nuxt-site-config": "^2.2.15",
    "nuxt-site-config-kit": "^2.2.15",
    "postcss": "^8.4.40",
    "sass": "^1.77.8",
    "tailwindcss": "^3.4.7"
  }
}

Thank you for your reply!

Reproduction

No response

System / Nuxt Info

No response

Leandro-b-03 commented 1 month ago

I've just deleted some .svg files from my repo and the server started as intended.