A minimalistic ClojureScript interface to React.js
Joe 2020-08-16T14:33:14.184400Z

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"}
    [:> Button {:color "inherit"}"Login"]]])

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

Joe 2020-08-16T14:33:44.184500Z

html from source:

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

Joe 2020-08-16T14:34:43.184700Z


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.

Joe 2020-08-16T14:35:53.184900Z


p-himik 2020-08-16T14:36:23.185100Z

> 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-himik 2020-08-16T14:36:43.185300Z

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

Joe 2020-08-16T14:42:49.185600Z

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-himik 2020-08-16T14:45:59.185900Z

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

Joe 2020-08-16T14:48:10.186100Z

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