Fork me on GitHub
#shadow-cljs
<
2020-06-27
>
erik09:06:53

@thheller so is it possible at all? at least to switch the default connect-to context? and in any case, which context does the shadow nREPL connect to by default? bg or content?

thheller09:06:28

whatever connects first πŸ˜›

πŸ‘ 3
erik14:06:09

so it’s currently not deterministic even?

thheller15:06:55

honestly I can't remember too much about chrome extensions

thheller17:06:16

@kenny there is :compiler-options {:source-map-comment false} but I'm not sure its supported for all targets.

kenny15:06:33

Thanks! Afaict, this isn't documented. Would be great to have it under https://shadow-cljs.github.io/docs/UsersGuide.html#compiler-options.

kenny15:06:30

For those following along, I can confirm this does work as expected for the :browser target.

thheller17:06:59

@donyorm looks fine but http servers aren't really related to any build. consider using the newer :dev-http. https://shadow-cljs.github.io/docs/UsersGuide.html#dev-http

chucklehead17:06:33

Hello all - I'm trying to use the React UI components from the most recent version of the AWS Amplify framework in a CLJS project. I'm currently running into an issue that I think is related to the CLJS compilation, but I'm new to all of this and definitely out of my depth at this point. If I try to import the AmplifyAuthenticator component using ["@aws-amplify/ui-react" :refer (AmplifyAuthenticator)], I see the following in the shadow-cljs server console during the first build (which does go on to complete successfully):

[2020-06-27 12:53:18.268 - INFO] :shadow.build.npm/js-invalid-requires - {:resource-name "node_modules/@aws-amplify/ui-components/dist/cjs/index-b93ab635.js", :requires [{:line 1615, :column 73}]}
If I try to render an AmplifyAuthenticator component in my application I see the following in the console:
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
If it helps: I think the new Amplify framework wraps Web Components and my suspicion is that I'm either doing something wrong in the way that I'm importing or compiling that's causing a polyfill to go missing, or doing something wrong in the way that I'm creating or passing children to the new version of the component. There are examples online using a prior version of the framework with CLJS and I was able to put together a minimal reproduction where the legacy Authenticator component from aws-amplify-react renders and swapping it for AmplifyAuthenticator from @aws-amplify/ui-react fails. https://github.com/casselc/amplify-reproducer https://github.com/casselc/amplify-reproducer/compare/works-legacy-aws-amplify-react Would appreciate any pointers in the right direction, thanks!

thheller18:06:13

@chuck.cassel guess it requires ES6 classes. set :compiler-options {:output-feature-set :es6}

chucklehead20:06:02

Thanks, I'd played around with that in my actual app before I got around to putting together the example but I still had some errors and concluded I didn't know what I was doing πŸ˜•. I just tried it again with the example in the repo and with :es6 it still doesn't render, but does give this error instead:

index-b93ab635.js:1606 Module not provided: ./amplify-authenticator.cjs.entry.js
index-b93ab635.js:1334 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
    at eval (index-b93ab635.js:1334)
    at Generator.next (<anonymous>)
    at b (app.js:34)
bumping up to :es8 for generators gives:
index-b93ab635.js:1606 Module not provided: ./amplify-authenticator.cjs.entry.js
index-b93ab635.js:1334 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
    at initializeComponent (index-b93ab635.js:1334)
Is this something where I need an extern? I've tried messing around with the various :infer-externs options without success.

thheller22:06:51

maybe try :es7 or :es8?

thheller22:06:04

this does not seem externs related

thheller22:06:22

any other errors before that one?

chucklehead22:06:16

:es7 gives the same as :es6, :es8 and :es-next both give

index-b93ab635.js:1606 Module not provided: ./amplify-authenticator.cjs.entry.js
index-b93ab635.js:1334 Uncaught (in promise) TypeError: Cannot read property 'isProxied' of undefined
    at initializeComponent (index-b93ab635.js:1334)
no other errors in the browser, and only the js-invalid-requires message in the shadow-cljs server output.

chucklehead22:06:20

If I wanted to test bringing it in via CDN, what would the :js-options {:resolve {"@aws-amplify/ui-react" { ... }} need to look like to pull in individual components? Not sure I understand what's going on well enough to translate the react globals example in the user guide.