Fork me on GitHub

I'm currently using re-frame for an SPA but I'm finding the React Query library really appealing. Is there a good way to use hooks in cljs?


if your project consumes a GraphQL API you might want to take a look at


Hi, I'm getting the error TypeError: Class constructor _o cannot be invoked without 'new' when trying to use this npm library with shadow-cljs . I've tried setting {:output-feature-set :es6} and {:optimizations :none} but no luck. Not sure how to go about debugging this. Any help appreciated.

(require ["@tonejs/piano" :refer (Piano)]) ; works
(Piano.) ; or (new Piano) throws error


it seems weird that it would be complaining about a variable named _o with optimizations turned off. Some things to try: • follow the tips from ie. use two additional options :pseudo-names true and :pretty-print true • there's been people that have had trouble copy and pasting code. since your error is having issues with _o, I'm wondering if there's a strange character before the "o" letter? • do you have source maps enabled? • what's the full .js file that is being produced from that namespace? • I'm also wondering if the cljs file isn't being recompiled or the new build optimizations aren't being updated for some reason


I can't even use "@tonejs/piano" with shadow-cljs:

Closure compilation failed with 1 errors
--- node_modules/tone/build/Tone.js:2
This code cannot be converted from ES6. class expression that cannot be extracted


Ah, :compiler-options {:output-feature-set :es6} does fix that.


The error seems to be a result of some incompatibility between ES5, ES6, and maybe shadow-cljs. Despite the above compiler option, this

super(optionsFromArguments(Piano.getDefaults(), arguments));
gets turned into this:
_this = _possibleConstructorReturn(this, _getPrototypeOf(Piano).call(this, (0, _tone.optionsFromArguments)(Piano.getDefaults(), arguments)));
And ES6 constructors, if I understand correctly, always require new and cannot be used withh .call. @U05224H0W I've seen your old comment on SO at mentioning that you've never seen it before. Do you have any idea what's going on or how to fix it?


the problem here is actually babel


babel is unused to transform ESM code in node_modules. I don't know why it converts the class though. it is only supposed to convert import/export


@U072GK534 try

:compiler-options {:output-feature-set :es6}
        :js-options {:babel-preset-config {:modules "commonjs"
                                           :targets "chrome > 70"}}


not sure why this is necessary but it seems to work


adding @U05224H0W’s :js-options worked! thanks also @U2FRKM4TW and @U7RJTCH6J for the help :)


Is it expected that

(this-as this
  (js/console.log this))
(let [_ (this-as this
          (js/console.log this))])
may print different things when used in the same context?


Corresponding transpiled JS:

var this_24 = this;
var __25 = (function (){var this$ = this;
                        return console.log(this$);


yes, expected.


really always need to do this-as as the first thing in a function

👍 3
Rafał Wyszomirski09:10:48

Hey hello. Sorry if this question was asked before but how can I get the whole response using :on-success returns response data only; I would be interested in response headers and status also.


Hmm, not sure there is a built-in way of getting that. You might be able to use :on-request handler to get the full request and it's response

Rafał Wyszomirski10:10:03

Thank you for your response. Okay, so that would be for the request, but no such thing exists for response, right? I am wondering what is the cljs & re-frame way of handling xhr requests then 🙂 Should use cljs-http and built on top of it instead of using http-fx/cljs-ajax?


If I remember correctly, you'll get back a Xhrio object from :on-request, which after :on-success you can call getResponse or getHeaders on. Hacky workaround but think I did something like that when I wanted the status code for some requests

Rafał Wyszomirski10:10:22

@UEJ5FMR6K that would mean that it has to be stored as a ref/atom first, right?


Sorry for the delay. Yeah, either that or store the request in your app-state that you're using for re-frame

Rafał Wyszomirski21:10:31

Thanks for the response. I have managed to solve this issue with help from the community here 🙂 And the answer is using ring-response-format :

:response-format (ajax/ring-response-format {:format (ajax/json-response-format)})

code star 820:10:23

Anyone recommend using CLJS with React? For prototyping? I am also working on trying Figma wireframing to React components.


Check out #helix for a library that works with plain react. We’re using hx which is the ancestor, pretty happy with it.


Personally I'd recommend it over JS for using with React.