Fork me on GitHub
#reagent
<
2020-08-16
>
Joe14:08:14

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"]])

Joe14:08:44

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>

Joe14:08:43

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.

p-himik14:08:23

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

p-himik14:08:43

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

Joe14:08:49

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"?

p-himik14:08:59

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?

Joe14:08:10

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

👍 3