Fork me on GitHub
#shadow-cljs
<
2022-07-24
>
geraldodev11:07:31

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 ?

thheller12:07:21

@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

thheller12:07:26

what is the problem you are seeing?

geraldodev12:07:05

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

thheller12:07:00

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

thheller12:07:27

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

geraldodev12:07:10

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

geraldodev12:07:51

yes 4.0.10 version

thheller12:07:08

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

geraldodev12:07:28

just to prove that it s returning nothing.

thheller12:07:09

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

geraldodev12:07:48

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

thheller12:07:28

ok but you are diagnosing the wrong problem 🙂

thheller12:07:43

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

thheller12:07:15

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

thheller12:07:03

no NODE_ENV involved anymore since their build already stripped it

thheller12:07:39

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

thheller12:07:52

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

geraldodev12:07:35

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

geraldodev12:07:02

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 ?

thheller12:07:08

uhm that path is incorrect

thheller12:07:23

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

geraldodev12:07:50

I did without it before

thheller12:07:11

I mean check what your node_modules folder looks like

thheller12:07:21

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

geraldodev12:07:30

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

thheller12:07:31

literally just go in the folder

thheller12:07:50

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

thheller12:07:19

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

geraldodev12:07:02

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

thheller12:07:33

ok, and then check what the folder looks like

thheller12:07:22

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

thheller12:07:55

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

geraldodev12:07:11

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

thheller12:07:44

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?

thheller12:07:11

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

thheller12:07:41

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

geraldodev13:07:19

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

geraldodev13:07:13

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

thheller13:07:49

haha I didn't even look at the file

thheller13:07:54

yeah that makes no sense 😛

thheller13:07:31

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

thheller13:07:38

that at least has some code in it

geraldodev13:07:43

they declare a bunch of unicode chars on that file

geraldodev13:07:49

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"}

geraldodev13:07:53

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

thheller13:07:19

well that won't change that particular error probably

thheller13:07:44

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

thheller13:07:56

"Ã": 'A', would be fine

geraldodev13:07:33

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.

thheller13:07:42

no, as I said its closure compiler issue

thheller13:07:14

that likely won't have those headaches

geraldodev13:07:35

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

thheller13:07:14

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

geraldodev14:07:36

they appear to be using rollup

thheller14:07:07

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