Blaze Support?
Opened this issue · 25 comments
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
I tried to get my project running in the meantime, and I am getting this error:
I20240327-15:24:02.924(-7)? error on boot.js packages/modules.js:1880
I20240327-15:24:02.933(-7)? const __filename = __cjs_fileURLToPath(import.meta.url);
I20240327-15:24:02.934(-7)? ^
I20240327-15:24:02.935(-7)? SyntaxError: Identifier '__filename' has already been declared
I20240327-15:24:02.935(-7)? at new Script (node:vm:99:7)
I20240327-15:24:02.936(-7)? at createScript (node:vm:255:10)
I20240327-15:24:02.936(-7)? at Object.runInThisContext (node:vm:303:10)
I20240327-15:24:02.936(-7)? at /tools/static-assets/server/boot.js:414:32
I20240327-15:24:02.936(-7)? at /tools/static-assets/server/boot.js:503:13
I20240327-15:24:02.936(-7)? at AsyncLocalStorage.run (node:async_hooks:346:14)
I20240327-15:24:02.936(-7)? at /tools/static-assets/server/boot.js:502:37
I20240327-15:24:02.936(-7)? at Function.run (/home/dan/repos/proj/.meteor/local/build/programs/server/tools/tool-env/profile.ts:315:14)
I20240327-15:24:02.936(-7)? at startServerProcess (/tools/static-assets/server/boot.js:501:17)
I20240327-15:24:02.936(-7)? at Object.<anonymous> (/tools/static-assets/server/boot.js:508:2)
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.
I have created the mainModule section in package.json and the entrypoints stuff.
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:
W20240327-17:58:41.460(-7)? (STDERR) ⚡ Detected multiple package definitions within lodash.isobject! Please report this to https://github.com/JorgenVatle/meteor-vite/issues
W20240327-17:58:41.461(-7)? (STDERR) ⚡ Package aldeed:collection2 was defined within lodash.isobject 🤔
W20240327-17:58:41.857(-7)? (STDERR) ⚡ Detected multiple package definitions within qs! Please report this to https://github.com/JorgenVatle/meteor-vite/issues
W20240327-17:58:41.858(-7)? (STDERR) ⚡ Package ostrio:flow-router-extra was defined within qs 🤔
W20240327-17:58:41.863(-7)? (STDERR)
W20240327-17:58:41.863(-7)? (STDERR) ERROR Could not locate 'lib/index.js' in package!
W20240327-17:58:41.864(-7)? (STDERR) undefined
W20240327-17:58:41.864(-7)? (STDERR)
W20240327-17:58:41.864(-7)? (STDERR) --[Error Stack]----------------------------------------------------------------------
W20240327-17:58:41.864(-7)? (STDERR)
W20240327-17:58:41.864(-7)? (STDERR) ERROR Could not locate 'lib/index.js' in package!
W20240327-17:58:41.864(-7)? (STDERR) undefined
W20240327-17:58:41.864(-7)? (STDERR)
W20240327-17:58:41.864(-7)? (STDERR) --[Error Stack]----------------------------------------------------------------------
W20240327-17:58:41.864(-7)? (STDERR)
W20240327-17:58:41.864(-7)? (STDERR) ERROR Could not locate 'lib/index.js' in package!
W20240327-17:58:41.865(-7)? (STDERR) undefined
W20240327-17:58:41.865(-7)? (STDERR)
W20240327-17:58:41.865(-7)? (STDERR) --[Error Stack]----------------------------------------------------------------------
W20240327-17:58:41.865(-7)? (STDERR)
W20240327-17:58:41.865(-7)? (STDERR) ERROR Could not locate 'lib/index.js' in package!
W20240327-17:58:41.865(-7)? (STDERR) undefined
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 mainModule field to target the blaze entrypoint, but the part I am not understanding is how I should be targeting the react portion of my app with vite.
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 mainModule.
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:
W20240701-17:57:35.266(-7)? (STDERR) ⚡ Detected multiple package definitions within qs! Please report this to https://github.com/JorgenVatle/meteor-vite/issues
W20240701-17:57:35.266(-7)? (STDERR) ⚡ Package ostrio:flow-router-extra was defined within qs 🤔
W20240701-17:57:35.266(-7)? (STDERR) 5:57:35 PM [vite] Internal server error:
W20240701-17:57:35.267(-7)? (STDERR) ERROR Could not locate 'lib/index.js' in package!
W20240701-17:57:35.267(-7)? (STDERR) undefined
W20240701-17:57:35.267(-7)? (STDERR)
W20240701-17:57:35.267(-7)? (STDERR) --[Error Stack]----------------------------------------------------------------------
W20240701-17:57:35.267(-7)? (STDERR) at get mainModule [as mainModule] (/home/dan/repos/capx/capx1/node_modules/meteor-vite/dist/plugin/index.js:1549:13)
W20240701-17:57:35.267(-7)? (STDERR) at _MeteorPackage.getModule (/home/dan/repos/capx/capx1/node_modules/meteor-vite/dist/plugin/index.js:1489:19)
W20240701-17:57:35.267(-7)? (STDERR) at stubTemplate (/home/dan/repos/capx/capx1/node_modules/meteor-vite/dist/plugin/index.js:360:35)
W20240701-17:57:35.267(-7)? (STDERR) at Context.load (/home/dan/repos/capx/capx1/node_modules/meteor-vite/dist/plugin/index.js:1886:24)
W20240701-17:57:35.268(-7)? (STDERR) at async Object.load (file:///home/dan/repos/capx/capx1/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:44323:32)
W20240701-17:57:35.268(-7)? (STDERR) at async loadAndTransform (file:///home/dan/repos/capx/capx1/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:54954:24)
W20240701-17:57:35.268(-7)? (STDERR) at async viteTransformMiddleware (file:///home/dan/repos/capx/capx1/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:64430:32)
The second is an scss issue:
W20240701-17:57:34.789(-7)? (STDERR) 5:57:34 PM [vite] Internal server error: [sass] Can't find stylesheet to import.
W20240701-17:57:34.790(-7)? (STDERR) ╷
W20240701-17:57:34.790(-7)? (STDERR) 1 │ @import '{}/imports/ui/stylesheets/stylists/shared/_bootstrap-custom2.scss';
W20240701-17:57:34.790(-7)? (STDERR) │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
W20240701-17:57:34.790(-7)? (STDERR) ╵
W20240701-17:57:34.790(-7)? (STDERR) imports/ui/components/common/Navbar/Navbar.scss 1:9 root stylesheet
W20240701-17:57:34.790(-7)? (STDERR) Plugin: vite:css
W20240701-17:57:34.790(-7)? (STDERR) File: /home/dan/repos/capx/capx1/imports/ui/components/common/Navbar/Navbar.scss:1:9
W20240701-17:57:34.791(-7)? (STDERR) Error: Can't find stylesheet to import.
W20240701-17:57:34.791(-7)? (STDERR) ╷
W20240701-17:57:34.791(-7)? (STDERR) 1 │ @import '{}/imports/ui/stylesheets/stylists/shared/_bootstrap-custom2.scss';
W20240701-17:57:34.791(-7)? (STDERR) │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
W20240701-17:57:34.791(-7)? (STDERR) ╵
W20240701-17:57:34.791(-7)? (STDERR) imports/ui/components/common/Navbar/Navbar.scss 1:9 root stylesheet
W20240701-17:57:34.791(-7)? (STDERR) at Object.wrapException (/home/dan/repos/capx/capx1/node_modules/sass/sass.dart.js:2184:43)
... and on and on and on ...
Which version of the meteor-vite npm package are you running?
this is from my package.json: "meteor-vite": "^1.10.3"
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 meteor-vite@1.10.4. That should hopefully resolve the issue with the FlowRouter package. 🤞
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. 😂
Out of curiosity would that plugin be fourseven:scss? Vite provides some good tooling for pre-processing your assets. so if it's only a syntax issue, you should be able to transform those old import strings into something that is supported by Vite with only a few lines and some nasty regex expressions.
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 fourseven unfortunately, it doesn't offer the module support we need. The lunacy of how contrived our app is is not lost on me lol. We're at about 250k sloc, all of which used to be blaze/ meteor. We are rewriting entirely in react, and are unfortunately in that strange no man's land where we have some of both right now.
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 ?inline syntax for importing css modules. When I use the fix that the console gives me, the styles just don't load.
UPDATE:
I have gotten our styles to work properly in both sections of our application. The only remaining problem I have is with the ?inline syntax for vite.
Oh, great to hear there's some progress. 🙌
I'm not very familiar with the ?inline import query param. Are you importing styles from CSS with @import or from JavaScript?
The Vite docs seem to suggest that CSS modules should be named using a .module.css suffix. Though for SCSS I suppose this would depend on the SCSS plugin you're using.