Fork me on GitHub
#shadow-cljs
<
2023-03-28
>
Clojuri0an00:03:22

Can someone check if my imports are configured correctly? I get an error that useStripe is null

(ns invoice.frontend.main
  (:require [lambdaisland.fetch :as fetch]
          [promesa.core :as p]
          [reagent.core :as r]
          [reagent.dom :as rd]
          ["@stripe/react-stripe-js" :refer (Elements CardElement useStripe useElements)]
          ;; something seems wrong here ^^
          ["@stripe/stripe-js" :refer (loadStripe)]))

Clojuri0an00:03:51

Strange. After running npm install stripe/react-stripe-js my dependencies are borked, returning compilation error

../node_modules/@stripe/react-stripe-js specified entries but they were all missing
I think I may have damaged something by manually purging my npm user temp directory a few days ago. I'll delete node modules and try to reinstall everything again

Clojuri0an00:03:04

Also wondering why I have the deref symbol at stripe, seems like a mistake

Clojuri0an00:03:31

Still having this problem, but I've audited the directory and the files exist.

Clojuri0an00:03:06

deleting the ["@stripe/react-stripe-js" requirement, compiling, re-adding it, compiling hangs. Then breaks again.

Clojuri0an01:03:23

It's hard for me to tell what went wrong. I fixed my build issues by deleting my global npm directory, reinstalling the latest npm, moving my src and .edn config file into a new directory, re-initializing npm, re-installing shadow-cljs, and re-installing all npm packages. However my invoice-frontend.js now returns

malformed hexadecimal character escape sequence
under goog.debug. Compiling fixed this, but once again back to the same issue of stripe being null. Will see if it's a browser cache issue

thheller05:03:49

the @ in this case does not mean deref. it is just a way npm packages are grouped under an "organization". so @stripe is the organization and react-stripe-js is the package in that org

thheller05:03:13

has nothing to do with CLJS, just coincidence they use the @

thheller05:03:40

otherwise looks correct

thheller05:03:25

you can always try to ["@stripe/react-stripe-js" :as x :refer (Elements CardElement useStripe useElements)] and (js/console.log "x" x) or (js/console.dir x)

thheller05:03:38

just to find out what x actually is, and see what the package provides

thheller05:03:37

seems like useStripe should exist, but you seem to be getting a bunch of weird errors. so might be your disk or something

Mikko Harju05:03:28

Morning! What is the best way to fix

--- node_modules/react-virtualized-auto-sizer/dist/react-virtualized-auto-sizer.js:218
Transpilation of 'Member references this or super' is not yet implemented.

thheller05:03:55

setting a "higher" :output-feature-set if you are setting any at all

👍 2
Mikko Harju05:03:09

What is the best way to determine how up does one need to go? Just by binary search? 🙂

Mikko Harju05:03:26

Oh, that should be related classes so es6…?

thheller05:03:03

why are you setting it in the first place? the default should be "safe" enough

Mikko Harju05:03:26

I was not setting it

Mikko Harju05:03:44

I was assuming your answer meant to set it higher

thheller05:03:06

> if you are setting any at all

thheller05:03:27

I guess the default is too low then. the default is :es2020 which I assumed would be good enough

thheller05:03:47

I guess you can try :compiler-options {:output-feature-set :es-next}

thheller05:03:03

that doesn't transpile anything, which doesn't mean it'll work unfortunately

thheller05:03:23

is an option instead

thheller05:03:35

or upgrading, just in case you are using an old shadow-cljs version

Mikko Harju05:03:25

I just updated shadow-cljs and recalculated the dependencies with yarn and this came up 🙂

thheller05:03:17

that doesn't necessarily tell me if you upgraded shadow-cljs 😛

thheller05:03:28

you could be using deps.edn or project.clj to manage dependencies

Mikko Harju05:03:50

=== Version
jar:            2.22.8
cli:            2.22.8
deps:           1.3.4
config-version: 2.22.8

Mikko Harju05:03:17

I used to have 2.11.x

thheller05:03:35

and it worked before?

thheller05:03:02

or did it work before because you were using an older react-virtualized-auto-sizer version?

Mikko Harju05:03:07

Yes, I think recalculating the dependencies brought up some incompatible version.

thheller05:03:26

always gotta be careful when upgrading npm package versions

thheller05:03:40

could be the closure-compiler adding a check that wasn't there before as well

thheller05:03:55

can't say for sure, the error you are getting is from the closure-compiler, not shadow-cljs

thheller05:03:59

can't do anything about that

Mikko Harju05:03:14

Yeah, this is my problem, not yours 😄

Mikko Harju05:03:44

I was just interested in hearing if someone had hit this but I’ll investigate the package deps then and see where it broke. Thanks so much for your fast replies!

Mikko Harju05:03:55

Yeah, downgrading it from 1.0.9 to 1.0.6 fixed that error. Nice.

Mikko Harju05:03:11

It’s not always inconsequental to do even patch version level updates 😄

thheller05:03:30

it pretty much never is in the npm world 😛

😞 2
Jérémie Salvucci13:03:31

Hi, I'm currently trying to use two different node_modules, three and @okta/okta-auth-js. I'm using js-options to specify an order to use the module key (package.json) to load three.module.js first. Unfortunately, to load okta I need to specifiy a different key but module is also used. I really need to avoid the module key for okta. Is there a way to specify this order on a package basis?

thheller13:03:03

why do you need to avoid it for okta? the answer is no, this is a global setting and not per package

thheller13:03:41

you could just require the file you need directly of course, in which case shadow-cljs won't event look for the :entries

Jérémie Salvucci13:03:24

I don't know exactly why but when I specify module first, the build makes a reference to a promise (through generator-runtime) which prevents Okta from checking that the full authentication process went right

thheller13:03:51

I do not understand that description. I'd assume that both variants do some kind of async?

thheller13:03:06

do you get an actual error or something else in the console?

Jérémie Salvucci13:03:12

Here is the actual error,

Uncaught (in promise) AuthSdkError: Could not load PKCE codeVerifier from storage. This may indicate the auth flow has already completed or multiple auth flows are executing concurrently.
    at exports.parseFromUrl (parseFromUrl.js:132:13)
    at PromiseQueue.run (PromiseQueue.js:63:32)
    at eval (PromiseQueue.js:48:12)
    at new Promise (<anonymous>)
    at PromiseQueue.push (PromiseQueue.js:34:12)
    at eval (events.cljs:45:25)
    at re_frame$fx$do_fx_after (fx.cljc:59:23)
    at Object.re_frame$interceptor$invoke_interceptor_fn [as invoke_interceptor_fn] (interceptor.cljc:70:6)
    at Object.re_frame$interceptor$invoke_interceptors [as invoke_interceptors] (interceptor.cljc:108:24)
    at Object.re_frame$interceptor$execute [as execute] (interceptor.cljc:201:8)

Jérémie Salvucci13:03:51

Not both actually, only Okta.

Jérémie Salvucci13:03:14

But I'm not sure how Okta interacts with babel in details

thheller14:03:11

hmm not sure. this is an internal error from the library itself. doesn't seem build related.

thheller14:03:34

where did you get the generator-runtime from?

thheller14:03:06

anyways you can change your require from "@okta/okta-auth-js" to "@okta/okta-auth-js/umd/default.js" to get the "browser" directly. essentially this bypasses the :entries config

thheller14:03:08

or :js-options {:resolve {"@okta/okta-auth-js" {:target :npm :require ""@okta/okta-auth-js/umd/default.js"}}} in the build config also works

Jérémie Salvucci14:03:02

This is exactly what I did. I'll just avoid using a generic directive when dependencies grow