Fork me on GitHub
#figwheel-main
<
2022-06-24
>
Luke Zeitlin16:06:04

Hi, trying to use https://github.com/Hacker0x01/react-datepicker 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?

dominicm17:06:40

Has webpack been rerun since you added it?

dominicm17:06:04

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

dominicm17:06:29

Also, hi 👋

Luke Zeitlin17:06:27

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

dominicm17:06:29

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

dominicm17:06:53

:bundle-freq :smart

dominicm17:06:11

By default, figwheel only runs the bundle command once.

dominicm17:06:10

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

dominicm17:06:45

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

dominicm17:06:57

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.

dominicm17:06:06

You can try running it manually to see.

dominicm17:06:59

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

Luke Zeitlin17:06:50

webpack runs happily

dominicm17:06:30

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

dominicm18:06:15

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

athomasoriginal19:06:21

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

Luke Zeitlin19:06:43

Yeah it's required there

athomasoriginal19:06:32

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

dominicm19:06:25

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

dominicm19:06:36

I should write a debugging flowchart for this

👍 1
Luke Zeitlin19:06:39

it's undefined if I log it out

athomasoriginal19:06:12

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

dominicm19:06:17

import DatePicker from "react-datepicker";

dominicm19:06:55

https://clojurescript.org/news/2021-04-06-release is this the form that will end up needing $default in there?

athomasoriginal19:06:49

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
dominicm19:06:13

Ah, yes. That's definitely it then

dominicm19:06:57

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

athomasoriginal19:06:46

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

athomasoriginal19:06:09

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

dominicm19:06:40

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

👍 1
athomasoriginal19:06:21

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