Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

[vnctaing]

Hi,

I'm trying to use the latest @aws-amplify/ui-react instead of the legacy aws-amplify-react

It's somewhat similar to this stackoverflow issue that is using the legacy import { withAuthenticator } from 'aws-amplify-react';. I was able to make things work with the legacy aws-amplify-react library.

(ns myapp.core
  (:require
   ["@aws-amplify/ui-react" :refer (AmplifyAuthenticator, AmplifySignUp, AmplifySignOut)]
   ["aws-amplify" :default Amplify :as amp]
   ["/aws-exports.js" :default aws-exports]
  (:import goog.History))


(def authenticator (r/adapt-react-class AmplifyAuthenticator ))

(def signup (r/adapt-react-class AmplifySignUp ))

(def amplify-signout (r/adapt-react-class AmplifySignOut ))

(defn home []
    ......
    [authenticator
     [:div
      [amplify-signout]]
     ]
)

But this outputs

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

I'm expecting it to render the signout component I tried to change the output build to es6 or es8 but no dice

   :builds
   {:app
    {:target     :browser
     :compiler-options {:output-feature-set :es8}
     :output-dir "target/cljsbuild/public/js"
     :asset-path "/js"
     :modules    {:app {:entries [tartataing.app]}}
     :devtools   {:watch-dir "resources/public"}}

Here's the reproducible repo : https://github.com/vnctaing/tartataing/blob/main/src/cljs/tartataing/core.cljs

[thheller]

Try adding :js-options {:babel-preset-config {:targets {:chrome 50}} or so to your build config.

[vnctaing]

No dice, I've even tried to rm -rf .shadow-cljs and rm -rf target/cljsbuild/public/js

[vgautamm]

I am getting this error

[vgautamm]

No dice, I've even tried to rm -rf .shadow-cljs and rm -rf target/cljsbuild/public/js

Did you manage to resolve this issue

[thheller]

The amplify libraries nowadays make heavy use of webpack specific features that shadow-cljs does not support. You may need to use webpack as described here to get those working.

[rberger]

I'm seeing the same exact issue and it has come up on the #reagent channel on Clojurians slack. I don't know enough (yet) to know how to use webpack to make this work. If anyone comes up with a cookbook solution, please let us know.

[DavidVujic]

I have described a solution in a blog post linked below, using both shadow-cljs and webpack as suggested by @thheller

https://davidvujic.blogspot.com/2021/08/hey-webpack-hey-clojurescript.html