how to get vite-plugin-relay to work
hello. I'm trying to use this plugin as a last-mile build solution for the relay parts that need to be babel transformed, using clojurescript that was compiled using shadow-cljs into esm. I've been able to use this plugin with much success in the past but am finding it difficult for this one use case and was wondering what it is I'm overlooking since I'm getting this error when loading the site with vite
browser.js:1 Uncaught Invariant Violation: graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as
graphql. Note also that there cannot be a space between graphql and the backtick that follows.
, which I'm taking to mean that the plugin was not applied. Thank you!10 Replies
@oscartbeaumont any ideas?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
definitely! a part of the compiled code that I would try to build using vite and the plugin looks like this:
I also did try this one out https://github.com/cometkim/vite-plugin-relay-lite , which helped move me further, but still didn't get me there. I feel like it might be possibly the way the compilation's done before it gets to vite that might be the main issue, at least based on what I saw from vite-plugin-inspect.
GitHub
GitHub - cometkim/vite-plugin-relay-lite: Vite plugin for more conv...
Vite plugin for more convenient Relay experience. Contribute to cometkim/vite-plugin-relay-lite development by creating an account on GitHub.
with vite-plugin-relay, I get this where the query is left as is, which may be more a babel-plugin-relay thing than anything else
![](https://utfs.io/f/a99f4cda-6e78-4565-bb66-cceddc7762a9-oar1cl.35.45_AM.png)
with the other plugin which doesn't depend on that plugin, the diff looks like this:
![](https://utfs.io/f/33ea75b8-1ee8-4d96-9274-51bcd46c8d06-s9rbwa.28.58_PM.png)
but then when running a successful example with vite-plugin-relay using the vite-2 example, I see this:
![](https://utfs.io/f/fa7e3d34-4a57-4715-85b6-a864ac723816-oar1cl.41.23_AM.png)
the part I'm stuck at with my example with the lite plugin is that it seems to output this
app.core.query = module$node_modules$react_relay$index.(graphql__28cc5aa159a3a0063f56c891d87c3748.hash && graphql__28cc5aa159a3a0063f56c891d87c3748.hash !== "28cc5aa159a3a0063f56c891d87c3748" && console.error("The definition of 'app_pages_homeQuery' appears to have changed. Run
relay-compiler to update the generated files to receive the expected data."), graphql__28cc5aa159a3a0063f56c891d87c3748);
, which is a bit confusing since the compiled code seems to suggest that useLazyLoadQuery
would be passed into some method that belongs to the node that replaces the query rather than the other way around
I'll try to create a minimal repro without the buggy part of the compiled code on stackblitz.
the plugin definitely works for other use cases.I think it may be because the compiled clojurescript is using a qualified version of the
graphql
tag, accessing it by dotting into a few objects, which may cause the babel plugin to not recognise it.that was exactly it. thank you very much!
I also wasn't able to find a way to get clojurescript onto stackblitz. I'm not sure if any online platform supports that as well