Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Svelte 5 Support #50

Open
didier opened this issue May 30, 2024 · 19 comments
Open

Svelte 5 Support #50

didier opened this issue May 30, 2024 · 19 comments

Comments

@didier
Copy link

didier commented May 30, 2024

With Svelte 5 around the corner, it'd be awesome if we could update this to support Svelte versions above 4.X. Currently unable to build my site since sveltekit-og relies on a peer dependency of ^4.0.0.

[11:18:27.838] Installing dependencies...
[11:18:28.689] npm ERR! code ERESOLVE
[11:18:28.691] npm ERR! ERESOLVE unable to resolve dependency tree
[11:18:28.691] npm ERR! 
[11:18:28.691] npm ERR! While resolving: [irrelevant]@0.0.1
[11:18:28.691] npm ERR! Found: [email protected]
[11:18:28.691] npm ERR! node_modules/svelte
[11:18:28.691] npm ERR!   dev svelte@"^5.0.0-next.144" from the root project
[11:18:28.691] npm ERR! 
[11:18:28.692] npm ERR! Could not resolve dependency:
[11:18:28.692] npm ERR! peer svelte@"^4.0.0" from @ethercorps/[email protected]
[11:18:28.692] npm ERR! node_modules/@ethercorps/sveltekit-og
[11:18:28.692] npm ERR!   @ethercorps/sveltekit-og@"^3.0.0" from the root project
[11:18:28.692] npm ERR! 
[11:18:28.692] npm ERR! Fix the upstream dependency conflict, or retry
[11:18:28.692] npm ERR! this command with --force or --legacy-peer-deps
[11:18:28.692] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[11:18:28.692] npm ERR! 
[11:18:28.692] npm ERR! 
[11:18:28.692] npm ERR! For a full report see:
[11:18:28.692] npm ERR! [irrelevant]
[11:18:28.693] 
[11:18:28.693] npm ERR! A complete log of this run can be found in: [irrelevant]
[11:18:28.703] Error: Command "npm install" exited with 1
[11:18:28.903]
@theetherGit
Copy link
Collaborator

@didier please open a ticket in svelte-h2j. BTW it's coming soon....
I have a v5 implementation ready, testing pending.

@didier didier mentioned this issue May 30, 2024
Open
@didier
Copy link
Author

didier commented Jun 10, 2024

Anything I can do to help test? I'm kind of blocked with my v5 migration.

@theetherGit
Copy link
Collaborator

@didier You can test it by updating etherCorps/sveltekit-og to next version. It's works on vercel. I did make API changes so please check https://github.com/etherCorps/sveltekit-og/tree/main/src/routes for new examples. I did it kinda and make a mess of merging it into main. But you can now use v5. I'll fix other issues.

@didier
Copy link
Author

didier commented Jun 11, 2024

That seems to work, thanks! Testing prod now.

One thing, an error is thrown if no props object is passed to ImageResponse. Adding an empty object resolves it, but would be nice if the argument is completely optional.

@theetherGit
Copy link
Collaborator

I was working on a different implementation based on vue og images but when I saw ur comment i just did a patch work in the last implementation to release for test.

@didier
Copy link
Author

didier commented Jun 11, 2024 •
edited
Loading

So far, prod on Vercel doesn't seem to work, but I don't get any errors in my logs either. Will investigate.

@theetherGit
Copy link
Collaborator

theetherGit commented Jun 11, 2024 •
edited
Loading

Test 1: https://sveltekit-og.ethercorps.io/ - With html string
Test 2: https://sveltekit-og.ethercorps.io/sc - With Svelte Component

Vercel Exampes Project - https://github.com/etherCorps/sveltekit-og/tree/main/examples/vercel-build
Test 1: https://sveltekit-og-vercel.vercel.app/ - html string
Test 2: https://sveltekit-og-vercel.vercel.app/cog - Svelte Component

This lib works in server side only.

@didier
Copy link
Author

didier commented Jun 11, 2024 •
edited
Loading

The two tests look inconsistent. Is that intended?

EDIT: So just to be 100% sure, @resvg-js is no longer a peer dep?

@theetherGit
Copy link
Collaborator

@resvg-js is no longer a peer dep?
What do you mean by this?
The two tests look inconsistent. Is that intended?
They might be different but still works. But it also depends on what you are referring as inconsistent

@didier
Copy link
Author

didier commented Jun 11, 2024 •
edited
Loading

Well I get some warnings about @resvg-js possibly not being found on the server:

Warning: The following modules failed to locate dependencies that may (or may not) be required for your app to work:
  node_modules/@resvg/resvg-js/js-binding.js
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.android-arm64.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.android-arm-eabi.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.win32-x64-msvc.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.win32-ia32-msvc.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.win32-arm64-msvc.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.darwin-universal.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.darwin-x64.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.darwin-arm64.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.freebsd-x64.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-x64-musl.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-x64-gnu.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-arm64-musl.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-arm64-gnu.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-arm-gnueabihf.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-riscv64-musl.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-riscv64-gnu.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-s390x-gnu.node
    - @resvg/resvg-js-android-arm64
    - @resvg/resvg-js-android-arm-eabi
    - @resvg/resvg-js-win32-x64-msvc
    - @resvg/resvg-js-win32-ia32-msvc
    - @resvg/resvg-js-win32-arm64-msvc
    - @resvg/resvg-js-darwin-universal
    - @resvg/resvg-js-darwin-x64
    - @resvg/resvg-js-darwin-arm64
    - @resvg/resvg-js-freebsd-x64
    - @resvg/resvg-js-linux-arm64-musl
    - @resvg/resvg-js-linux-arm64-gnu
    - @resvg/resvg-js-linux-arm-gnueabihf
    - @resvg/resvg-js-linux-riscv64-musl
    - @resvg/resvg-js-linux-riscv64-gnu
    - @resvg/resvg-js-linux-s390x-gnu
  node_modules/ws/lib/buffer-util.js
    - bufferutil
  node_modules/ws/lib/validation.js
    - utf-8-validate
  Warning: The following modules failed to locate dependencies that may (or may not) be required for your app to work:
  node_modules/ws/lib/buffer-util.js
    - bufferutil
  node_modules/ws/lib/validation.js
    - utf-8-validate

I meant inconsistent as in, they seem to try to render the same image, but the output looks different

@didier
Copy link
Author

didier commented Jun 11, 2024

Either way, I'm not getting any errors (even with debug: true), but it doesn't seem to be working... I'm not doing anything fancy either, just an HTML string passed into ImageResponse.

@theetherGit
Copy link
Collaborator

Can you provide me a repro for this anywhere with source? I'll try to help you.

@didier
Copy link
Author

didier commented Jun 12, 2024 •
edited
Loading

https://github.com/didier/sveltekit-og-repro
https://sveltekit-og-repro.vercel.app

Here you go. I should say, I'm now getting errors, even in development.

Cannot find module 'estree-walker' imported from '/Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/@ethercorps/svelte-h2j/dist/toReactElement.js'
Error: Cannot find module 'estree-walker' imported from '/Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/@ethercorps/svelte-h2j/dist/toReactElement.js'
    at nodeImport (file:///Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:56268:25)
    at ssrImport (file:///Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:56177:30)
    at eval (/Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/@ethercorps/svelte-h2j/dist/toReactElement.js:4:37)
    at async instantiateModule (file:///Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:56237:9

Installing estree-walker as a dependency resolves the error, but does not make the OG image work.

@didier
Copy link
Author

didier commented Jun 12, 2024

CleanShot 2024-06-12 at 12 11 30@2x
Deployment also shouts about peerDependencies

@didier
Copy link
Author

didier commented Jun 12, 2024 •
edited
Loading

I still think the issue is somehow in how resvg-js is used. Every time I build it warns about it not being found, and since it's in Rust, we won't get any errors in JS land. Installing it separately does not resolve the issue either.

@theetherGit
Copy link
Collaborator

theetherGit commented Jun 12, 2024 •
edited
Loading

I still think the issue is somehow in how resvg-js is used

In new implementation that's what i'm trying to handle so i sveltekit-og can be runtime agnostic.

Every time I build it warns about it not being found, and since it's in Rust, we won't get any errors in JS land. Installing it separately does not resolve the issue either.

Ok, I'm testing it now. Give me some time

@theetherGit
Copy link
Collaborator

@didier brother you and me missed flex on div. If you remember satori uses yoga which is an implementation of flex box.

@didier
Copy link
Author

didier commented Jun 12, 2024

Does not putting flex on the div completely kill the generation without error? 🤔🤔

@theetherGit
Copy link
Collaborator

Yes, you can find something related to this in satori issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@didier @theetherGit