reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
ruben.hamers 2021-02-01T05:47:47.033600Z

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

Ruben.Hamers 2021-02-01T08:10:16.034900Z

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

p-himik 2021-02-01T08:14:18.035100Z

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.Hamers 2021-02-01T08:14:48.035300Z

thanks 🙂

ruben.hamers 2021-02-02T04:50:05.035700Z

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👍
p-himik 2021-02-01T06:30:25.034100Z

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

ruben.hamers 2021-02-01T06:38:50.034300Z

ok, thx ill check that 🙂

ruben.hamers 2021-02-01T06:52:54.034500Z

dont exactly see whats wrong about it :s

p-himik 2021-02-01T06:55:51.034700Z

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.Hamers 2021-02-01T08:10:16.034900Z

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

p-himik 2021-02-01T08:14:18.035100Z

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.Hamers 2021-02-01T08:14:48.035300Z

thanks 🙂