New vite:bundler package: Vite + Meteor

announce
21

SSR probably needs some work to be supported, but I haven’t have time to look into it just yet :cat2:

4 Likes
22

Does anyone have a sample React project they could share?
I am part way there, it shows my page at localhost:3000, and the console suggests that HMR is working, but the page doesn’t update when I make changes.
I also get a 404 from localhost:5173 - not sure if that is normal or not?

1 Like
23

Thanks for building and sharing—I really like Vite and am very excited about this development!

I am working on a project where new UI components are React but there are tons of old Blaze components, as well as Atmosphere dependencies that use Blaze components. Will this work at all on such a project? If so, are there any major gotchas that someone using Blaze components should be aware of?

24

@mikkelking
Unfortunately, React doesn’t work [Examples] add React by afrokick · Pull Request #1 · Akryum/meteor-vite · GitHub

25

Just came across Vite yesterday, when reading through the most recent State of JavaScript report. Loved the concept. So I am happy to see that someone is already working on an integration with Meteor.

Do you already have long-term support in mind for this integration, or was it “just” a proof-of-concept for now?

I am also wondering: If Vite could replace Meteor’s iso-bundler on the long run, I can imagine a future where the “remaining” core features of Meteor (reactivity, user management, easy MongoDB integration, etc.) would be offered as separate npm packages and the Meteor tool becomes more like a scaffolding tool that puts all parts together nicely?

1 Like
26

It would be great to see it in Meteor, but it appears to be stalled

27

Vite integration is not stalled as I understand it. Vite is a project that was created by the same developers that are behind Vue, although it is not limited to use within the Vue ecosystem and it is not branded as such. So when akryum, who is a core member of the Vue project, started updating the Meteor-Vue integration to work with Vue 3, he chose not to update the old component package used in the Vue 2 integration and instead made the integration work on top of Vite. That project is alive and well. Vue 3 works with Meteor and uses Vite. There are some kinks in the integration still as far as I know, some Vue 3 features still need attention, but in general the package should be usable and the Vite part is up and running.

You can take a look at the readme here: vue-meteor-tracker/README.md at next · meteor-vue/vue-meteor-tracker · GitHub

And from there you’ll find a link to this:
https://packosphere.com/vite/bundler

3 Likes
28

Totally correct. Thanks for the reply @vooteles!
@akryum did a great job and now we need more people using the Vite integration to get feedback and improve it.

29

we need more people using the Vite integration to get feedback and improve it.

Hi @fredmaiaarantes , could you help us with this issue Error with Vite bundler for Meteor + Vue 3 app · Issue #129 · disney/meteor-base · GitHub with Vite. There is a proposal to solve the problem but I think you can help us with this since you have more notion about how Meteor works.

Thanks!

30

@vooteles I was not clear in my comment, that the Vite/React work with Meteor is stalled - or am I wrong on that too? Is someone driving that? I would be happy to help, as it will make developing in Meteor much easier for people with a less powerful machine.

1 Like
31

As far as I understand, the driving force behind making Meteor work with Vite was to make the Vue 3 integration happen and that should already be in working condition. It should be a project with long term maintenance goals. There probably will not be very active development on that front, but akryum has been a good maintainer of his integrations so I think it is in good hands.

I don’t think there has been any work done currently on making Vite work with React on Meteor. Not sure what that would require. Maybe akryum’s Vite package can be used for this as well, but I’d be more worried about the work that would need to be done in React packages specifically.

32

I finally managed to run and deploy a big Meteor+Svelte+Tailwind application using vite:bundler. It was hard. I had to:

  1. Replace all nested imports with require() (issue).
  2. Remove explicit Accounts imports (issue).
  3. Fork rdb:svelte-meteor-data because of this issue.
  4. Fork vite:bundler itself to make deployment with Docker (Disney’s image) possible (PR).
  5. Put all CSS files inside imports folder and import them in JS.
  6. Remove # from folders names (I had #lib and #startup).

Is the game worth the candle? I hope, it is. HMR updates are lightning fast (previously I had to wait for a minute sometimes). I’m not sure about the overall performance yet (my biggest issue on Windows) but it seems to be better.

The project definitely needs more attention. Fixing knowing issues, React support, Vite 4 support are the most important steps.

6 Likes
33

The step 4 solved the build error with my Vue app as well. Thanks so much!

1 Like
34

The step 4 solved the build error with my Vue app as well.

@Akryum has published a new version of Vite with that fix The trusted source for JavaScript packages, Meteor.js resources and tools | Atmosphere

2 Likes
35

FYI I had a look at whether it was possible to use this approach with vue2. I thought it might be feasible as vite has a plugin for vue2 as well as vue3 but the vue2 plugin needs vue@2.7 to work and the meteor-vue-tracker project which you are also very likely to need is pinned to vue@2.6 so the conclusion Ive reached is that this is not possible.

36

My conclusion above from last week was out of date. The updated skeleton for vue-2 in the meteor 2.11 branch shows how to use vue 2.7 and the latest version of meteor-vue-tracker. It requires a slightly different approach to coding your vue SFCs which you’ll see in the skeleton but its definitely doable. See vue-2 skeleton creates a broken project · Issue #12499 · meteor/meteor · GitHub.

4 Likes