any user of react-query 4 series ? I'm having hard time trying to make ReactQueryDevtools to work. it has a condition depending on NODE_ENV to include component https://github.com/TanStack/query/blob/e9d62f4e125a9773559e5ed82f32fec5bd48a15e/packages/react-query-devtools/src/index.ts#L4 Even with export NODE_ENV=development at desktop level It does not work. Do you have any clue about this ? I'm asking here because I'm compiling with shadow. Can it be closure compiler ?

@geraldodev never look at the source code of a library to diagnose errors. this is typescript, so the actual code you are consuming is different

what is the problem you are seeing?

they say this conditional is for the devtools not to be included in the production version. What I'm seeing is a null function even with NODE_ENV = development on my .zshenv . When I invoke it returns null

sorry I'm missing context. what are you doing exactly? you are seeing a null function where?

env variables don't matter if you compile stuff for the browser for example

The context is (:require ["@tanstack/react-query-devtools" :refer [ReactQueryDevtools]] .... (js/console.log "devtools function" (ReactQueryDevtools))

ah, I guess you are trying this https://tanstack.com/query/v4/docs/devtools?

yes 4.0.10 version

but you are calling it as a function when it is not a function? it is a react component?

just to prove that it s returning nothing.

https://github.com/TanStack/query/blob/e9d62f4e125a9773559e5ed82f32fec5bd48a15e/packages/react-query-devtools/src/index.ts#L6 like in this variant

(ReactQueryDevtools) this is invalid, you cannot call this as a function

I did that after ($ ReactQueryDevtools) render nothing. $ is helix React.createElement

ok but you are diagnosing the wrong problem 🙂

if you look at the contents of the actual package you are consuming

https://unpkg.com/browse/@tanstack/[email protected]/

if has a "browser": "build/umd/index.production.js", in its package.json, which tells shadow-cljs to include that file

and https://unpkg.com/browse/@tanstack/[email protected]/build/umd/index.production.js just returns null always

no NODE_ENV involved anymore since their build already stripped it

what you can do is :dev {:js-options {:resolve {"@tanstack/react-query-devtools" {:target :npm :require "@tanstack/react-query-devtools/dist/umd/index.development.js"}}} in your build config

that'll include the development file for dev builds (watch/compile) but not release

That'll do it. Thank's a lot. This little tool is invaluable to see what queries are in the cache.

It says ExceptionInfo: :resolve override for "@tanstack/react-query-devtools" to "@tanstack/[email protected]/build/dist/umd/index.development.js" which does not exist . In that case shadow try to fetch itself ?

uhm that path is incorrect

notice the @4.0.10, that needs to go, all it does it get node_modules/@tanstack/react-query-devtools/dist/umd/index.development.js

I did without it before

I mean check what your node_modules folder looks like

maybe its different for the version you have. my example should work otherwise?

oh i see.. it goes for the already fetched package on node modules directory

grep devtools yarn.lock "@tanstack/react-query-devtools@^4.0.10": resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.0.10.tgz#d1b3e5b1917f1c22bcee5830ef7af1ccfc4879f4"

literally just go in the folder

cd node_modules/@tanstack/react-query-devtools and check whats in it

what error do you get if you use my example above?

resolve override for "@tanstack/react-query-devtools" to "@tanstack/react-query-devtools/dist/umd/index.development.js" which does not exist {:tag :shadow.build.resolve/invalid-override, :require-from nil, :require "@tanstack/react-query-devtools", :other "@tanstack/react-query-devtools/dist/umd/index.development.js"} ExceptionInfo: :resolve override for "@tanstack/react-query-devtools" to "@tanstack/react-query-devtools/dist/umd/index.development.js" which does not exist

ok, and then check what the folder looks like

and check you are in the correct folder if you use :js-package-dirs in the build config as well?

all this is trying to do is find a file on disk, should be easy to find

its @tanstack/react-query-devtools/build/umd/index.development.js

and you are in the correct folder? I mean the directory that the shadow-cljs.edn file is in and then node_modules/@tanstack/react-query-devtools/dist/umd/index.development.js from there?

(and you are using a somewhat recent version of shadow-cljs?)

I don't see anything wrong with it but check typos and such

Now it's not complaining anymore. But I'm seeing a pattern: Its looks like its the package 🙂 (as always)

Because the development version returns null. umd/index.development.js

haha I didn't even look at the file

yeah that makes no sense 😛

I guess you can change it to node_modules/@tanstack/react-query-devtools/dist/esm/index.js

that at least has some code in it

they declare a bunch of unicode chars on that file

Errors encountered while trying to parse file /home/geraldo/projetos/crudis/node_modules/@tanstack/react-query-devtools/build/esm/index.js {:line 158, :column 3, :message "Character '̆' (U+0306) is not a valid identifier start char"}

But now I know the root cause, I'll ask them to fix the umd file. Thank you @thheller

well that won't change that particular error probably

the closure compiler doesn't like js objects with unicode keys such as Ã: 'A',

"Ã": 'A', would be fine

https://github.com/google/closure-compiler/issues/3639 old issue unfortunately

https://codesandbox.io/s/intelligent-heisenberg-srmx02 if I try a code sandbox to repro and open the issue it does not happen 🙂 I guess it's operating at typescript level.

no, as I said its closure compiler issue

you can just use webpack as described here https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html#option-2-js-provider-external

that likely won't have those headaches

I was talking about the null component file. That does not happen on the codesandbox.

yes, because webpack is likely inclusing the esm file by default

they appear to be using rollup

same

you can configure shadow-cljs to use the esm file by default too via :js-options {:entry-keys ["module" "browser" "main"]}. won't change the parser error though