Dependency conflict when using embla-carousel-svelte in a project with the new Svelte version 4

[anzbert]

Feature request is related to

• embla-carousel-svelte

Is your feature request related to an issue?

When I use embla carousel in a svelte project, I am getting a dependency error when using the new Svelte 4.0 in my project. I can only run npm update with overrides like -force in that case.

Describe the solution you'd like

Please start using Svelte ^4.0.0 in embla-carousel-svelte. That should fix the issue.

[davidjerleke]

Hi @anzbert,

Thank you for sharing this information!

Please start using Svelte ^4.0.0 in embla-carousel-svelte. That should fix the issue

I don’t think this is an optimal solution because it might give Svelte 3 users dependency errors/warnings instead. And I guess it’s likely that some devs won’t migrate to v4 right away.

Wouldn’t it be better if we go with the same approach as the embla-carousel-react package and use the or operator in package.json so we can support multiple Svelte versions? Like this:

embla-carousel/packages/embla-carousel-react/package.json

Lines 62 to 64 in 7122b8e

	"peerDependencies": {
	"react": "^16.8.0 || ^17.0.1 || ^18.0.0"
	}

But before we do that I would very much appreciate if you wouldn’t mind testing if the embla-carousel-svelte package is compatible with Svelte v4 out of the box? In other words if there are some breaking changes in Svelte v3 —> v4 that affect the Embla package?

Best,
David

[davidjerleke]

@anzbertdid you read my response? Please let me know if you’re intending to pursue this.

[anzbert]

No sorry. I've switched to a different library instead, since I am really short in time. Sorry to cause a fuss.

…

On Fri, Jul 21, 2023, 14:58 David ***@***.***> wrote: @anzbertdid you read my response <#535 (comment)>? Please let me know if you’re intending to pursue this. — Reply to this email directly, view it on GitHub <#535 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJIGOFDC4G5SWUNXN7RA63TXRJVGFANCNFSM6AAAAAA2IUEXUQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[davidjerleke]

To anyone who wants to help out: Test the embla-carousel-svelte package and make sure it works with Svelte 4.

[VincentWENDLING]

Hello @davidjerleke,

I've been working on a project with Sveltekit and embla-carousel-svelte for sometime and I just upgraded to Svelte 4.
Everything works good, except for a bug that I've been having for some time (before upgrading to Svelte 4).

I think I should open an issue when I find the time to talk about this bug in more details.

Best,
Vincent

[davidjerleke]

Hi @VincentWENDLING,

Thank you for sharing that 🙂! Feel free to open a pull request with the suggested solution if you want. If you can't, I'll do it when I get the time.

If you think you've found a bug, you're welcome to create a bug report with a CodeSandbox that demonstrates the problem and I'll investigate it.

Best,
David

[teneon]

Hi guys,

I have installed latest version of Svelte (SvelteKit). I wanted to install Embla, but it is not compatible / installation failed.

jim@i9:~/svelteProjects/entra-tailwind$ npm install embla-carousel-svelte --save

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: entra-tailwind@0.0.1
npm ERR! Found: svelte@4.2.0
npm ERR! node_modules/svelte
npm ERR!   dev svelte@"^4.0.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer svelte@"^3.49.0" from embla-carousel-svelte@8.0.0-rc11
npm ERR! node_modules/embla-carousel-svelte
npm ERR!   embla-carousel-svelte@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/jim/.npm/_logs/2023-08-20T21_39_46_322Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/jim/.npm/_logs/2023-08-20T21_39_46_322Z-debug-0.log

========================

Any suggestions except downgrading Svelte until this issue is resolved?

Nice package btw, it works smoothly and it worked great for me for older version of Svelte. But AFAIK recently version 4 was released and this is causing the issue.

best regards,
Jim

[teneon]

For anyone with the same problem, I was able to install it like this:
npm install embla-carousel-svelte --save --legacy-peer-deps
npm install embla-carousel-autoplay --save --legacy-peer-deps

It seems to work on the first sight ,but i need to make more tests.

kind regards,
Jim

[davidjerleke]

Hi @teneon,

Thanks for chiming in. I'm saying this with good intentions only (as mentioned here):

Instead of trying to patch this, all that's needed to solve this is a pull request with the following change in this file:

"peerDependencies": {
- "svelte": "^3.49.0"
+ "svelte": "^3.49.0" || "^4.0.0"
}

I've been insanely busy lately but I can create a release if someone creates the pull request.

Best,
David

[davidjerleke]

• Thanks a ton for the PR Allow peer dep svelte ^4.0.0 #556 @anzbert!

This will be released with v8.0.0-rc12 soon.

[davidjerleke]

@anzbert, @teneon and @VincentWENDLING, this feature has been released with v8.0.0-rc12.