ReagentからMUIのDatePickerを使おうとしてハマった

5680 ワード
MUI Reagent ClojureScript ClojureScript テキストリンク

ReagentからMUI (旧Material-UI) のDatePickerを使おうとしてハマったのでメモ。

上記のサンプルをreagentで書く。

(ns views
  (:require
   [re-frame.core :as re-frame]
   [reagent.core :as reagent]
   ["@mui/material" :as mui]
   ["@mui/lab" :as mui-lab]))

(defn basic-date-picker []
  (let [val (reagent/atom nil)]
    (fn []
      [:> mui-lab/LocalizationProvider {:date-adapter mui-lab/AdapterDateFns}
       [:> mui-lab/DatePicker {:label        "Basic example"
                               :value        @val
                               :on-change    #(reset! val %)
                               :render-input (fn [^js params]
                                               (reagent/create-element mui/TextField params))}]])))

これを実行する。

react.development.js:221 Warning: Failed prop type: The prop `dateAdapter` is marked as required in `LocalizationProvider`, but its value is `undefined`.
    at LocalizationProvider (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$lab$node$LocalizationProvider$LocalizationProvider.js:1:470)
・・・

react-dom.development.js:11341 Uncaught TypeError: Utils is not a constructor
    at eval (LocalizationProvider.js:39)

・・・

エラー出力され表示できない。
試しにAdapterDateFnsを覗いてみると…

(println mui-lab/AdapterDateFns)  ; ==> nil

うまく参照できてなかったもよう。
requireの方法を変えたら解決した。

+   ["@mui/lab/AdapterDateFns$default" :as AdapterDateFns]

-      [:> mui-lab/LocalizationProvider {:date-adapter mui-lab/AdapterDateFns}
+      [:> mui-lab/LocalizationProvider {:date-adapter AdapterDateFns}

こちらの記事のサンプルのように:defaultでもいける。

["@mui/lab/AdapterDateFns" :default AdapterDateFns]