Require aws-amplify v.3 Amplify and Auth classes in clojurescript/reagent shadow-cljs app

Question

I had a aws-amplify v.1.2.4 and it was working fine with

(ns app.core
    ["aws-amplify" :default Amplify]
    ["aws-amplify" :refer [Auth]])

(js/console.log Amplify) was a module (js/console.log Auth) and was a AuthClass

But I can't make it work after I upgraded aws-amplify to v.3.3.4

Both values are not available now.

What I tried is:

["@aws-amplify/core" :as amplify-core]
["@aws-amplify/auth" :as amplify-auth]

But it doesn't work as expected.

amplify-core/Amplify now is a AmplifyClass, but almost everything in it is null. Maybe it's an issue? I can call a

(.configure amplify-core/Amplify awsAmplifyConfig)

and it seems to work fine.

But

(console.log amplify-auth) => {__esModule: true}

and I can't do anything with it. Is there a way to get the actuall Auth class?

additionally there is a bunch of warnings in the console. Seems shadow-cljs can't load some modules: console screen

shadow-cljs - failed to load module$node_modules$http2$lib$protocol$index
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$http2$lib$http @ http.js:138
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$http2$lib$index @ index.js:19
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$node_http_handler$dist$cjs$node_http2_handler @ node-http2-handler.js:8
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$node_http_handler$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$runtimeConfig @ runtimeConfig.js:12
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$CognitoIdentityClient @ CognitoIdentityClient.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$index @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity @ fromCognitoIdentity.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$http2$lib$http
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$http2$lib$index @ index.js:19
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$node_http_handler$dist$cjs$node_http2_handler @ node-http2-handler.js:8
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$node_http_handler$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$runtimeConfig @ runtimeConfig.js:12
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$CognitoIdentityClient @ CognitoIdentityClient.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$index @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity @ fromCognitoIdentity.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$http2$lib$index
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_sdk$node_http_handler$dist$cjs$node_http2_handler @ node-http2-handler.js:8
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$node_http_handler$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$runtimeConfig @ runtimeConfig.js:12
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$CognitoIdentityClient @ CognitoIdentityClient.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$index @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity @ fromCognitoIdentity.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_sdk$node_http_handler$dist$cjs$node_http2_handler
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_sdk$node_http_handler$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$runtimeConfig @ runtimeConfig.js:12
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$CognitoIdentityClient @ CognitoIdentityClient.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$index @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity @ fromCognitoIdentity.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_sdk$node_http_handler$dist$cjs$index
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$runtimeConfig @ runtimeConfig.js:12
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$CognitoIdentityClient @ CognitoIdentityClient.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$index @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity @ fromCognitoIdentity.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$runtimeConfig
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$CognitoIdentityClient @ CognitoIdentityClient.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$index @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity @ fromCognitoIdentity.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$CognitoIdentityClient
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$index @ index.js:5
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity @ fromCognitoIdentity.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_sdk$client_cognito_identity$dist$cjs$index
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity @ fromCognitoIdentity.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$fromCognitoIdentity
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index @ index.js:6
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_sdk$credential_provider_cognito_identity$dist$cjs$index
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_amplify$core$lib$Credentials @ Credentials.js:58
shadow.js.jsRequire @ js.js:66
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_amplify$core$lib$Credentials
shadow.js.jsRequire @ js.js:74
shadow$provide.module$node_modules$$aws_amplify$core$lib$index @ index.js:42
shadow.js.jsRequire @ js.js:66
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822

js.js:74 shadow-cljs - failed to load module$node_modules$$aws_amplify$core$lib$index
shadow.js.jsRequire @ js.js:74
shadow.js.require @ js.js:100
eval @ app.core.js:5
goog.globalEval @ main.js:836
env.evalLoad @ main.js:2224
(anonymous) @ main.js:3822
main.js:2226 failed to load app.core.js Module not provided: ./framer

Any ideas?

Answer 1

I was able to resolve module loading issues. For an example, please take a look at this repository.

The trick was to

1. Switch compiler options to ES 6
2. Make sure that main is used to resolve code from JavaScript libraries. This ensures that AWS Amplify code is resolved with a compatible module system.
3. Activate support for functional react components in reagent
4. Install libraries that are used by AWS Amplify but somehow not installed via dependency resolution

For 1. and 2. just andd the following lines to your shadow-cljs.edn file:

:compiler-options {:output-feature-set :es6}
:js-options {:provider :closure
             :entry-keys ["main" "module" "browser"]}

For 3. you need to add these two lines to your core.cljs:

(def functional-compiler (r/create-compiler {:function-components true}))
(r/set-default-compiler! functional-compiler)

These changes might have unintended side effects!