Fork me on GitHub
#reagent
<
2021-02-01
>
ruben.hamers05:02:47

Hi, I got kinda a beginners question but I can't seem to figure this out. I'm trying to use a date-picker on my web-page. (https://github.com/wojtekmaj/react-date-picker#readme) But it keeps giving me this error (the date-picker is inside an element called search-bar)

Warning: React.createElement: 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.

Check the render method of `app.components.date_picker.date_picker`.
    in app.components.date_picker.date_picker (created by app.components.search_bar.search_bar)
This is the code for my date-picker:
(ns app.components.date-picker
  (:require [reagent.core :as r]
            [re-frame.core :as rf]
            [clojure.string :as str]
            ["react-date-picker" :refer [DatePicker]]))

(defn date-picker []
  (let [on-change (fn [d] ())
        value (js/Date.)]
    [:> DatePicker {:onChange on-change
                    :value value}]))

p-himik06:02:25

DatePicker is undefined, most likely. Probably because the :require vector is incorrect.

ruben.hamers06:02:50

ok, thx ill check that 🙂

ruben.hamers06:02:54

dont exactly see whats wrong about it :s

p-himik06:02:51

Just to make sure, put (js/console.log DatePicker) right after the ns form and see what it prints out. If you confirm that it's undefined, try replacing the require vector with ["react-date-picker" :as date-picker] and then check what date-picker contains and try to go from there. In the end, you might need use :as or :default (in case you're using shadow-cljs; something else otherwise).

Ruben.Hamers08:02:16

using shadow-cljs indeed. Ill try it when I get home 🙂 thx

p-himik08:02:18

In this case, you should consult the table in this section: https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages Do note that it might be wrong in rare cases, so when it doubt just log the :as require to figure out what to use.

ruben.hamers04:02:05

Hey, I fixed it by ["react-date-picker" :default DatePicker]. I'll read up on the userguide you send me about shadowcljs and npm packages. Thanks for helping m8 🙂

👍 1