search

nuxt-modules / og-image

Generate OG Images with Vue templates in Nuxt.
https://nuxtseo.com/og-image
400 stars 25 forks source link

Rendering components within template has styling broken since Nuxt 3.81 #111

Closed bogdanciuca closed 8 months ago

bogdanciuca commented 10 months ago

Describe the bug

Seems like the CSS isn't loaded anymore when the images are generated.

Version: "@nuxtseo/module": "2.0.0-beta.42"

3.8.0

3.8.0

3.8.1

3.8.1

Reproduction

Can add if needed

System / Nuxt Info

System:
    OS: macOS 13.6
    CPU: (8) arm64 Apple M1
    Memory: 53.42 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.18.2/bin/npm
    pnpm: 8.10.5 - ~/.nvm/versions/node/v18.18.2/bin/pnpm
bogdanciuca commented 10 months ago

Update: Still reproducing with nuxt: 3.8.2 and @nuxtseo/module: 2.0.0-beta.45.

Workaround: Pin nuxt version to 3.8.0.

harlan-zw commented 10 months ago

Thanks will likely resolve this in v3 as I need to rework how the inline styling works.

If you need another work around in the mean time, you'll need to switch to inline styles / tailwind classes.

bogdanciuca commented 10 months ago

@harlan-zw Thanks for the response. Unfortunately I'm using vuetify instead of tailwind. Regarding inline styles, are you referring to experimental.inlineSSRStyles: true in nuxt config? I just tried it, with no difference.

harlan-zw commented 10 months ago

@harlan-zw Thanks for the response. Unfortunately I'm using vuetify instead of tailwind. Regarding inline styles, are you referring to experimental.inlineSSRStyles: true in nuxt config? I just tried it, with no difference.

No, the issue is that Satori doesn't support non-inlined styles (or tailwind classes).

To get around this limitation the module uses https://github.com/Stranger6667/css-inline, however, it seems like there's an issue with how it's extracting the styles with the latest Nuxt.

bogdanciuca commented 9 months ago

@harlan-zw Thanks for the context! It seems a bit strange that nuxt changed this behaviour in a patch version, instead of a major / minor one.

I've created a follow-up issue in the dependency repo, hope that'll help.

harlan-zw commented 9 months ago

Are you able to share the template you're using? Need a good way to replicate this

harlan-zw commented 8 months ago

Should be performing better in 3.0.0-rc.21, let me know if that's not the case.

bogdanciuca commented 8 months ago

@harlan-zw apologies for the delayed response, it's been a horrific end of year. Will you be making a release of Nuxt SEO that uses this OG version?

harlan-zw commented 8 months ago

@harlan-zw apologies for the delayed response, it's been a horrific end of year. Will you be making a release of Nuxt SEO that uses this OG version?

Sorry to hear that, don't feel any obligation to respond in a timely manner, it doesn't matter.

Yes, I'll be releasing a @nuxt/seo RC soon

bogdanciuca commented 8 months ago

Thanks!

Will you be publishing the RCs to the npm registry by any chance? Looks like latest published version is 2.0.0-beta.55, which doesn't include the fix.

LE: Oh it seems that the package name has changed. I've successfully upgraded to latest RC, however the OG Image issue still persists. Additionally, images (i.e. logo) are not rendered either.

3.9.1

3.9.1