shadow-cljs 2023-11-01 | Slack Archive

Another dependency issue (I read the docs this time). To reproduce:

$ lein new re-frame re-frame-test
$ cd re-frame-test
$ npm install
$ npm install react-datepicker

Use dependency:

(ns re-frame-test.views
  (:require
   [re-frame.core :as re-frame]
   [re-frame-test.subs :as subs]
   ["react-datepicker" :refer (DatePicker)]
   ))

(defn main-panel []
  (let [name (re-frame/subscribe [::subs/name])]
    [:div
     [:h1
      "Hello from " @name]
     [DatePicker]]))

Build completes, but browser console gives:

template.cljs:277 Uncaught Error: Assert failed: Invalid Hiccup form: [nil]
 (in re_frame_test.views.main_panel)
(valid-tag? tag)
    at Object.reagent$impl$template$vec_to_elem [as vec_to_elem] (template.cljs:277:5)
    at Object.reagent$impl$template$as_element [as as_element] (template.cljs:294:22)
    at Object.eval [as reagent$impl$protocols$Compiler$as_element$arity$2] (template.cljs:315:10)
    at Object.reagent$impl$protocols$as_element [as as_element] (protocols.cljs:6:16)
    at eval (template.cljs:140:37)
    at eval (core.cljs:5704:36)
    at eval (core.cljs:5704:35)
    at Object.eval [as cljs$core$IKVReduce$_kv_reduce$arity$3] (core.cljs:5708:24)
    at Object.cljs$core$_kv_reduce [as _kv_reduce] (core.cljs:715:16)
    at Object.cljs$core$reduce_kv [as reduce_kv] (core.cljs:2596:8)

Am I doing something wrong? Thank you

hifumi12307:11:41

seems like a reagent issue caused by an import issue, evaluate DatePicker in your re-frame-test.views namespace

hifumi12307:11:00

I am 99% sure it is evaluating to nil, so you need to figure out how react-datepicker is exporting symbols

thheller08:11:27

look at the react-datepicker docs and the JS example used

thheller08:11:28

import DatePicker from "react-datepicker";

thheller08:11:52

then look at the translation examples for that syntax

thheller08:11:53

https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

thheller08:11:51

and you'll find that it should be ["react-datepicker$default" :as DatePicker], or depending on how the package is actually distributed it might actually be ["react-datepicker" :as DatePicker]. the docs cover how to figure that out

Tanner Hoelzel17:11:18

Thanks I appreciate it

alexdavis20:11:36

Not seen this one before, trying to import ["@triplit/client" :refer [TriplitClient]] throws with

[:app] Build failure:
package export match referenced a file that doesn't exist
{:rel-require "./", :package-dir #object[java.io.File 0x7e7c2b2d "./node_modules/@triplit/db"], :match {"types" "./dist/types/index.d.ts", "require" "./dist/cjs/index.js", "import" "./dist/esm/index.js", "default" "./dist/esm/index.js"}, :exports {"." {"types" "./dist/types/index.d.ts", "require" "./dist/cjs/index.js", "import" "./dist/esm/index.js", "default" "./dist/esm/index.js"}}}

though there is definitely a ./dist/esm/index.js file in ./node_modules/@triplit/db I'm on the latest shadow-cljs so I believe the exports syntax is supported now, but maybe not? or maybe I need to configure something different in my edn?

{:app {:target :browser
       :js-options {:entry-keys ["module" "browser" "main"]}
       :compiler-options {:output-feature-set :es-next}
       :output-dir "../src/cljs"}}

thheller20:11:55

the default path taken there is "require" and that file does not exist as far as I can tell

thheller20:11:14

:entry-keys does not affect which keys in "exports" is chosen

thheller20:11:34

it is this, also in :js-options

thheller20:11:35

:export-conditions ["browser" "require" "default" "module" "import"]

alexdavis20:11:41

Ah ok got it, thanks!

thheller20:11:45

as far as I can tell none of those files exist?

thheller20:11:54

so seems like a broken package to me

alexdavis20:11:06

that works but now I get

[:app] Compiling ...
[:app] Build failure:
Closure compilation failed with 3 errors
--- node_modules/@triplit/db/dist/esm/db-transaction.js:44
Transpilation of 'Member references this or super' is not yet implemented.
--- node_modules/@triplit/db/dist/esm/db-transaction.js:58
Transpilation of 'Member references this or super' is not yet implemented.
--- node_modules/@triplit/db/dist/esm/db-transaction.js:87
Transpilation of 'Member references this or super' is not yet implemented.

😢

thheller20:11:35

Last publish 3 hours ago

alexdavis20:11:39

it works in normal js land so not technically broken, though why people insist on reinventing the wheel with this package.json stuff is beyond me

thheller20:11:45

the package seems to look entirely differnetly now?

thheller20:11:51

TriplitDB is in alpha 😉

thheller20:11:31

could be that you just got a version combination that doesn't work

alexdavis20:11:21

yeah I'm not using it for anything serious, just want to play... but i think I have to accept that any new js library has some curse which enforces the authors to use the newest syntax possible and therefore won't work with cljs I did get shadow to find the files using your export-conditions thing but now stuck at Transpilation of 'Member references this or super' is not yet implemented. which I guess is just another closure limitation

alexdavis20:11:20

actually got it to work with com.google.javascript/closure-compiler-unshaded "v20230802"

thheller20:11:29

yep, the closure compiler is definitely not that cutting edge sometimes

thheller20:11:54

I guess I run some tests tomorrow to ensure its safe to upgrade and bump it in shadow-cljs directly

alexdavis20:11:07

That would be cool thanks, and if they finally get around to fixing the new private class fields syntax (supported by all browsers since 2021) then that fixes 99% of issues I have with closure

alexdavis20:11:28

though again I do not understand why there needed to be a syntax for private class fields 😓

thheller21:11:11

thats what you get in languages with a shit syntax to begin with 😉

2023-11-01

Channels