Hey guys.
Our organization is trying to determine if we are going to move to Svelte 5 or Vue 3. In doing testing, our interns haven’t been able to get Svelte 5 working.
We’ve added a $100 bounty on this:
Thank you!
2 Likes
In January I wanted to use Meteor with Svelte5 but gave up after a few hours and went with Sveltekit. After hacking about a week I was thinking, runes and all Svelte5 brings are cool but what is the real advantage over Vue? Also I was missing the Vue ecosystem so I switched to Meteor with Vue3, still happy that I did.
2 Likes
Try Jorgen Vatle’s vite package for Svelte, but your mileage may vary due to the ESM exports issue. Make sure you try building and deploying to Galaxy before committing - ESM-only (or poorly configured) package issues can help rear their head in some niche circumstances so dev mode is not enough.
Here’s the Jorgen Vatle fork of Meteor Vite:
He has an example project with Svelte 5
—-
From what I’ve heard (but not tried), Melte itself might be a bit behind and not compatible with Svelte 5. So you’re better off trying to replicate the Meteor data loading primitives yourself, which you’ll want to do with Vue 3 anyway. And it’s not so hard, easy to get Meteor’s Tracker to work with Vue and Svelte reactivity primitives than React’s (ironically - of course react-meteor-data package already exists, so that’s not something we need to worry about as much).
Actually, I’d try out Solid as a solid contender too. Under the hood it has a lot of similarities to Vue and Svelte, it just uses React style functions to essentially construct the components (but in practice more runtime characteristics shared with Vue setup functions, I believe, eg function bodies aren’t being rerun on every state update).
Again, you’ll need to test with Vite, test writing your own Meteor data related hooks etc, but worth considering.
What Solid and Svelte share as a downside is an existing big library of components. React has MUI and Chakra, and of course shadcn; Svelte and Solid (and Vue) have their own shadcn clones but with less maturity, otherwise Vue IIRC has the best all-round support of the React alternatives.
Edit: edemaine has some Solid related packages on GitHub, that might be useful as a reference.
There’s also a compiler plugin for Solid but I’d still go for a Vite-first approach personally.
You can also use the Melte code base as a reference.
The svelte 5 example does not work, hense the bounty:
. I think both of you are using Whoops, sorry @wreiske, I got lost in the details and after a few heavy edits didn’t realise I’d circled back to your problem! (That’ll teach me to post during dinner)
See my naive fix (pre-morning-coffee!) as a GitHub comment here.
Can test here: https://ceigey-meteor-svelte-test.au.meteorapp.com
When the package versions were bumped in the example project, the versions for the Meteor packages weren’t bumped, and jorgenvatle:vite didn’t have a version specified under .meteor/packages. It needed to use a version released at a similar time to the NPM package meteor-vite, e.g. you should use meteor-vite@^3.7.1 and jorgenvatle:vite@1.5.2 together.
So it should be as simple as:
meteor add jorgenvatle:vite@1.5.2
Running in dev on macOS Sequoia and on Meteor Galaxy - I haven’t used tsup.
1 Like
Wow! I’ll have to try it again. I attempted the version upgrade here and still got the white page. I’m traveling this weekend for mother’s day, so it might be a day or two before I can try it again.
It might also be an issue with 3.3 beta, I can’t remember if I tried bumping the package version without doing the new beta release 
UPDATE:
Hmm. I did a fresh checkout and still have not been able to get it working.
git clone https://github.com/JorgenVatle/meteor-vite.git
cd meteor-vite/examples/svelte
meteor add jorgenvatle:vite@1.5.2
meteor npm install --save-dev meteor-vite@^3.7.1
meteor npm install
meteor run
Well this is mysterious! I’ve made a repo with my changes so you can try this out instead:
Specifically, all the changes (some of which are probably unimportant, but at this stage of debugging anything goes!):
- removed the leading period from the filename
.vite.config.mts, and updatedpackage.json’smeteor.vite.configFileproperty accordingly. - modified the vite config accordingly:
meteor({
clientEntry: 'client/entry-vite.ts',
+ serverEntry: 'server/entry-vite.ts',
stubValidation: {
warnOnly: true,
}
})
- as you’re run already,
meteor add jorgenvatle:vite@1.5.2 - I took all the contents of
imports/ui/main.tsand placed them inclient/entry-vite.ts, just underneath the (now redundant)import "../imports/ui/main"; - I adjusted the imports accordingly:
-import App from "./App.svelte";
+import App from "/imports/ui/App.svelte";
- I removed everything from
server/entry-meteor.tsand put them in a new fileentry-vite.ts.
I tested the following works locally:
meteor reset
meteor npm start
You should see this when the page loads up:
I also tried a version bump to 3.3 beta 0 and it still seems to work.