Blaze Support? #151
Comments
|
I tried to get my project running in the meantime, and I am getting this error: I have created the |
|
I have modified some things and have resolved the above error, I think it was due to using vite 5 instead of vite 4. Now, I am getting somewhere. In my console, I am seeing this now: Any ideas? |
|
Bumping this... Disregard my specific issues, I just really need to know if this bundler supports blaze projects in meteor 3. If so, is there a demo project for it? I really need to know to plan how best to migrate a large legacy app I have @JorgenVatle |
|
Hey there. I'm busy this weekend, but ill have a closer look at it over Monday to Wednesday. Sorry to keep you hanging for so long. 🙏 |
|
No worries! If the bundler isn't ready for blaze thats quite alright, I just have not been able to figure out if it is for the life of me. |
|
Just had a quick look at it, and it seems like Blaze is working just fine together with Vite. There is a caveat though, Blaze templates (the .html files) need to be imported from your Meteor client entry, not from your Vite client entry. If you mount your Vite-powered React app onto an element rendered by Blaze, it should work. If you're still having issues, could you set up a repository reproducing the issue so I have something to test against? |
|
Do you have an example project/ set of config files where blaze and react are working together? To be clear, I have an app that uses both React and Blaze as part of the same application. I will use the |
|
Hey, sorry again about the late response. I'm afraid I won't have much time over the next couple of weeks to set up an example. The issue with Blaze support lies primarily in the fact that it appears to depend on Meteor's compilation process. There's no implementation I can find for Blaze that would allow us to easily compile those templates outside of Meteor's ecosystem. A way to get around this is by letting Meteor do its thing and then adding any functionality on top of that externally. My experience with React is somewhat limited unfortunately, so I don't know how the mounting process goes. But I imagine it's similar to Vue. You want to do is to separate your React app from your Blaze app. Essentially make sure they don't have any direct dependency on each other. To ensure Vite takes responsibility for your React app, just make sure you only put all your React code in modules imported by your Vite entrypoint, and any Blaze imports or code in modules imported by your Meteor If you have an import for something Blaze-specific in a module imported by your Vite entrypoint, like a template file. that's likely where the exceptions are coming from. If you can separate those, you should be good to go. |
|
If you have some sort of repository I can look at, maybe I could give you some quick pointers. |
|
I can see if I can put together a repo for this, not sure if that's going to be possible though. The codebase in question is large and nebulous... It may be easier for me to give a detailed description of how the codebase is set up, and then describe errors I get. It has been a while since I tried to integrate this, so I'll likely have to get back up to speed this week to give you a useful problem description. |
|
Quickly replaced Meteor's static html package with Blaze in the React example project. React seems to mount just fine. If Blaze loads up asynchronously or your mount point is not available immediately, you might need to delay mounting React a little so the mount target is rendered in the document before mounting. https://github.com/JorgenVatle/meteor-vite/tree/react-blaze/examples/react |
|
Delaying the mount is a very good idea. I'm the branch you linked though I'm only seeing the blaze dependency in the meteor packages file, not the code itself... |
|
Progress! I followed you example and got it kinda working. Now, I am getting two new issues. The first is a multi package definition: The second is an scss issue: |
|
Which version of the |
|
this is from my package.json: part of the issue is that both the react portion of the app AND the blaze portion of the app use CSS modules, which complicated the setup. additionally, there are random places in the blaze code where we mount react components. |
|
Turns out to be a bug unrelated to Blaze. I'll try to have a fix out for this later today. 👍 For the SCSS, I think that's more of Vite thing than anything. I've run into similar issues in the past. Try changing your import syntax and see if it makes a difference. You might also want to try a different plugin to handle your SCSS. |
|
Try with |
|
So using the new version, the app starts up with no errors. However, I cannot seem to get bootstrap to be compiled on either the blaze (non-vite section) of the app, or the react (vite section) of the app. I have tried a bunch of different places and syntaxes to import it, but no errors are thrown and no bootstrap classes end up in the web page. I have a feeling that meteor's less than stellar support for CSS modules is a major part of this issue. So, not really something for you to fix, but a very insidious problem nonetheless. |
|
Could be an issue with our plugin. The way Vite is set up to work together with Meteor in development is to essentially route as much responsibility as possible away from Meteor and onto Vite. The only limitation being Atmosphere packages. If you have the time to set up a quick repo demonstrating the issues you're running into I'd be more than happy to have a closer look. At the moment, I'm a little unclear on how to reproduce some of these issues. I'm relatively confident that there's a low-effort solution to work around some of the issues you've mentioned. |
|
I see. That makes sense, seeing as we're using a modified version of an atmosphere package to handle scss modules (the package was abandoned 5 years ago and seems to be the only solution for css modules in meteor). As for setting up an example repo, I would love to. I'm not sure if I am going to have time to though, or if setting one up that reproduces the issue is going to be straightforward. I'll talk with my team and figure out if we can dedicate a bit of time for this. I appreciate the help though. I have a sneaking suspicion that mixing react and blaze at multiple, disconnected points throughout our app is an issue. |
|
Oh, yeah, that SCSS build plugin will have to go unfortunately. 😂 Using the branch I linked you, if you could try to simulate the structure of your app. Some of the main dependencies, some routes and data fetching the issue will probably re-appear. Usually where things break is when parsing Meteor packages, or when a module is being imported from both your Meteor and Vite entrypoints. Using Blaze and React together with Vite is certainly going to require a little finesse to get working correctly. If your app isn't at a size where it's unreasonable to try to migrate away from Blaze, I really couldn't endorse it more. The grass is greener on the other side as they say. |
|
I have checked out Your insights about the packages being imported in both places is very helpful though. I had to basically hand-upgrade all of our atmosphere deps to use meteor 3, which was fun. Adding vite to our app is my mission over the next few months, and if that means effectively segregating all atmosphere/ blaze stuff into its own area, then so be it. That was another thing I wondered about though, I am a little stuck on the |
|
UPDATE: I have gotten our styles to work properly in both sections of our application. The only remaining problem I have is with the |
|
Oh, great to hear there's some progress. 🙌 I'm not very familiar with the |
|
The Vite docs seem to suggest that CSS modules should be named using a |
Hello @JorgenVatle
Does this package support Blaze as the root renderer? If so, does it support Blaze apps that also render React farther down the component tree? I would really love to use Vite for my project, but cannot easily use React at the root of the app.
Thanks,
Dan
The text was updated successfully, but these errors were encountered: