Fork me on GitHub
Luke Zeitlin16:06:04

Hi, trying to use in a figwheel-main project. Have added to project with yarn add react-datepicker (can see it in the package.json and in node_modules ) I'm importing it with ["react-datepicker" :refer [DatePicker]] . If I log out DatePicker it is undefined. If I try to construct one (eg: [:> DatePicker {:selected (js/Date.)}] ) then I get `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.` Other third party react components are in the project and working fine. Can someone nudge me in the right direction?


Has webpack been rerun since you added it?


There's an :auto-bundle option you can enable iirc


Also, hi 👋

Luke Zeitlin17:06:27

Hey Dominic 👋. I already have :auto-bundle :webpack in the metadata in web.cljs.edn


I mentioned the wrong option... I meant smart-bundle or bundle-freq I believe.


:bundle-freq :smart


By default, figwheel only runs the bundle command once.


The easiest way to test this theory is to just restart figwheel I think. It will bundle on startup and tada.

Luke Zeitlin17:06:24

It is unaffected by restarting figwheel


Huh, that is odd. Okay, if you look into your cljs output folder you should find an npm_deps.js file. Is your require in there?

Luke Zeitlin17:06:55

the require is there

Luke Zeitlin17:06:32

The linter complains "no declaration file for module" though


Cool. Good. I suspect then that the webpack command is failing for some reason. I can't remember how figwheel runs the command and what it does with the output.


You can try running it manually to see.


Check your logs for the command, and run manually. That should give you what you need 😃

Luke Zeitlin17:06:50

webpack runs happily


Any chance you have a cached js file?

Luke Zeitlin17:06:48

ran yarn cache clean

Luke Zeitlin18:06:26

I'll bang my head against this again on Monday I think 😵 thanks for the help so far Dominic, have a good weekend


I'd start poking at the bundle output to see if your npm dependency is in there


do you see react-datepicker in target/public/cljs-out/build-name/npm_deps.js ?

Luke Zeitlin19:06:43

Yeah it's required there


sweet. if you just require it as (require ["react-datepicker" :as datepicker) and console log datepicker what do you see?


Haha, right. Obvious question I didn't ask: how are you using the required date picker :face_palm:


I should write a debugging flowchart for this

👍 1
Luke Zeitlin19:06:39

it's undefined if I log it out


does the require name match the name is npm_deps.js ?


import DatePicker from "react-datepicker";

dominicm19:06:55 is this the form that will end up needing $default in there?


well, it depends. First step is to get something other than undefined and then we can try $default which is more of a convenience than a must have 🙂

Luke Zeitlin19:06:00

> sweet. if you just require it as (require ["react-datepicker" :as datepicker) and console log datepicker what do you see? Sorry, misread this - will try :as rather than just :refer ing DatePicker in a mo (AFK)

👍 1

Ah, yes. That's definitely it then


@U6GNVEWQG do you know if anyone has written a conversion guide for es6 to cljs requires yet? Like the shadow one.


How do you mean conversion guide? Like, if the JS lib uses ES6 module how do we translate those into CLJS?


If there is, I have yet to find it. There is the official CLJS docs which I believe are still accurate though.


I don't think they cover it in this way though. It would be a useful resource 🙂

👍 1

100% agree. I've yet to sit down and really understand the requires, otherwise I would 100% contribute to the CLJS docs because as you noted, it would be useful

Luke Zeitlin20:06:21

okay ["react-datepicker$default" :as DatePicker] does the job! Thanks for the help guys 🙏

partyparrot 1
🎉 1