Zodern Relay (typesafe methods) compile and babel issues

[timsun28]

Hi,

After reading up on the Meteor Vite topic on the forums, I decided to add this to my own project. I ran into some troubles when trying to build my project and with the integration of zodern relay package.

Zodern has built a babel plugin that handles rewriting files in methods and publications directories, so no server side code is added to the client bundle.

I'm unfortunately not very experienced with bundlers/babel/vite to solve this issue myself, so I was wondering if anyone could support me with this.

I tried to setup a repo where the error could be reproduced, but I ended up with more issues with Zodern relay package and the babel plugin not working at all.

I'm getting the following error: Uncaught Error: createMethod should never be called on the client. Ensure you have @zodern/babel-plugin-meteor-reify configured, or you are calling createMethod only in files inside a methods directory

I've checked and the package is installed correctly, I've setup the .babelrc file and the method is created inside a methods directory.

You can view the repo here: https://github.com/timsun28/vite-demo-ts-relay

After I get this working, I will continue updating the same repo with the before mentioned issues.

Two minor things I also couldn't really find in the docs are: In the terminal I'm getting this message, while I'm using "meteor-vite": "^1.10.1", not really sure why this is showing: W20240229-00:56:36.863(1)? (STDERR) ⚡ You are using an out of date version of meteor-vite. W20240229-00:56:36.863(1)? (STDERR) Please update it: $ meteor npm i meteor-vite@1.8.0

In the terminal after running meteor I get the following: ➜ Local: http://127.0.0.1:5173/ ➜ Network: use --host to expose ⚡ Meteor-Vite ready for connections!

When browsing to 5173, there is nothing running there, can this be ignored or is this a sign that there is something wrong with vite?

[ceigey]

I think (as a fellow user, not a maintainer) you miiiiight a Babel plugin for Vite in order to do that? Not an expert though.

I know this Vite plugin exists but I'm not sure if it's the "de facto" one to use, and I don't know if there would be undesirable side-effects.

https://github.com/owlsdepartment/vite-plugin-babel

---

I assume by default, Vite uses esbuild to handle JS/TS transpilation, and then uses Rollup to handle the rest of the build process. Different plugins can handle other responsibilities, such as compiling specific languages and formats (e.g. Vue and JSX), or hand over the responsibility to e.g. Babel or SWC.

In this case, I think the Babel configuration is coming from your Meteor project (specifically the .babelrc you've modified for zodern:relay), Vite doesn't even know it exists, so no transformation takes place. And in the best case scenario, that's desirable behaviour, because Vite + esbuild would be much faster than using Vite + Babel, so we wouldn't want Vite + Babel to be configured to run by default. So Vite is completely ignoring what's happening on the backend and just imports the zodern:relay specific code in a naive way that triggers the warning.

I assume the same is true whenever you use experimental babel transforms that don't exist in esbuild, such as for Stage 0, 1, 2 EcmaScript proposals. Vite needs to be told it has to use Babel to execute those transformations.

(In case I'm wrong, apologies in advance - I stopped using zodern:relay for an unrelated issue with cross-platform development where one developer was unable to build their project on their windows computer, so I haven't tried this myself)

[timsun28]

@ceigey Thank you for your elaborate explanation. So if I understand correctly we could try and use a vite plugin that would use Babel and at the same time uses the Babel plugin from modern.

An alternative would be to rewrite the plugin from zodern as a vite/rollup plugin so it would prevent the slow down caused by the switch to Babel.

I'll spend some time later this week to investigate what I can get working and how much work it would be to redo the plugin. I can imagine only some of the Babel specific code needs to be replaced to get it working, but I'm also no expert on this.

[JorgenVatle]

Hey there. I unfortunately haven't had too much time to look into this yet.

If all you need is type inference for your Meteor methods and publications, I just published a package with the tooling we've been using internally for our Meteor projects. meteor-type-validation This does not require any sort of compilation step and should plug in to any Meteor project. It assumes you're using Valibot however, and does not come with some of the fancy pipelines provided by Meteor Relay.

I'm going through the repo you provided now and will follow up in a bit once I know more. 👍

[JorgenVatle]

@ceigey Is pretty spot on here. It's looking like porting the Babel plugin to Vite would be the best bet here.

It looks like the Babel plugin creates client-only stubs for modules in your method and publication directories.

import { createMethod } from 'meteor/zodern:relay';

export const createLink = createMethod({
  name: 'links.create',
 //  ...
})

The above snippet would be converted to something like the following on the client.

import { createMethod } from `meteor/zodern:relay/client.ts`

export const createLink = createMethod('links.create');

I added a shim for the zodern:relay import and the repo you provided seems to be running just fine now. The plugin is available separately - @meteor-vite/plugin-zodern-relay. There's still some work left to be done to port over the Babel plugin to Vite. So while the plugin is functional, the contents of your method and publication modules aren't yet omitted from your client bundle like it would be when using the Babel plugin.

[JorgenVatle]

Just a follow up on the plugin - @meteor-vite/plugin-zodern-relay@1.0.2 now has a full implementation of the Babel plugin. It transforms your publications and methods using the official @zodern/babel-plugin-meteor-relay plugin, so everything should work as intended now. 👍

@timsun28 I'll mark the issue as closed. If you run into any issues, feel free to re-open it.