Clojurians Log v2

Hi, newbie question: I'm trying to use the material-ui components, going through the examples on the website. The following one works until I try to put in the MenuIcon component. In the original example, this is a self-closing tag, but other than that I don't see anything different about it. What am I doing wrong? Error details in the thread.

(ns material-tut.main
  (:require [reagent.core :as r]
            [reagent.dom :refer [render]]
            ["@material-ui/core" :refer [Typography
                                         Button AppBar Toolbar IconButton]]
            ["@material-ui/icons/Menu" :refer [MenuIcon]]))

(defn top-bar []
  [:> AppBar {:position "static"}
   [:> Toolbar {:varient "dense"}
    [:> IconButton
     {:edge       "start" :class-name "classes.menuButton" :color "inherit"
      :aria-label "menu"}
     [:> MenuIcon]]
    [:> Typography {:variant   "h6"
                    :className "classes.title"}
     "News"]
    [:> Button {:color "inherit"}"Login"]]])

(defn app []
  [:div
   [top-bar]
   [:> Typography {:variant :h1} "hello world"]
   [:> Button {:variant "contained"
               :color   "primary"}
    "Click Me"]])

html from source:

<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" className={classes.title}>
      News
    </Typography>
    <Button color="inherit">Login</Button>
  </Toolbar>
</AppBar>

Error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Thanks!

> but got: undefined It means that you imported MenuIcon incorrectly. Just put (js/console.log MenuItem) somewhere and notice that it prints out undefined.

It should probably be ["@material-ui/icons/Menu" :default MenuIcon]

That did it, thanks! I haven't come across default in :require before, is that effectively saying "there's a single thing in this src file, call it MenuIcon"?

Not really since there may be multiple things exported from that module, but one of them may be the default one. Have you seen the table at https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages?

I hadn't, I see there's a section specifically about :default - thank you.