clojurescript 2024-04-24

James Carr13:04:41

Bit of a newbie here... how can I configure shadow-cljs to attach a custom header like Document-Policy: js-profiling for local development?

James Carr13:04:58

Trying to get some browser profiling with Sentry setup.

p-himik13:04:18

To potentially save you a lot of headache - don't profile development apps. It's almost completely pointless. Profile production builds with pseudo-names enabled in shadow-cljs.

James Carr13:04:09

very good point, but my goal is less to profile development builds and more to get it actually working so we can flip it on in production 🙂

p-himik13:04:46

There's a great potential to stumble upon all sorts of issues due to the discrepancies between dev and prod builds. Your server seems to be different - ideally, it should be the same. The fact that you set the right header with shadow-cljs doesn't guarantee in any way that the prod server also sets it in the correct way. The dev build is split into a bazillion of files, whereas the prod build is usually just a single file (or a few, if you have module splitting). Perhaps there are other differences. If you aren't persuaded and want to proceed with the dev server that shadow-cljs provides, the https://shadow-cljs.github.io/docs/UsersGuide.html#dev-http way to do it would be to pass a :push-state/headers option. Or a :handler option if you need more control.

James Carr13:04:53

Yeah I hear you, I have ZERO intention of actually doing this locally, I just want to see the profiler run so I know what I really do need to do on the serverside in production. 🙂

James Carr13:04:22

But you could be right, I suppose I could just deploy straight to staging instead

p-himik13:04:48

In similar cases, I just launch the prod config locally. No clue whether it's possible with your setup.

Ferguson17:04:33

Hi i just try to make carousel using react-material-ui-carousel with reagent and material ui.... but there is a problem

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 `fe_learning.components.carousel.CarouselComponent`.
cmp@http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43
div
shadow$provide.module$node_modules$$emotion$react$dist$emotion_element_48d2c2e4_cjs_dev/exports.withEmotionCache/<@http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_48d2c2e4_cjs_dev.js:4:160
shadow$provide.module$node_modules$$mui$system$createBox/exports.default/<@http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$system$createBox.js:3:255
div
shadow$provide.module$node_modules$$emotion$react$dist$emotion_element_48d2c2e4_cjs_dev/exports.withEmotionCache/<@http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_48d2c2e4_cjs_dev.js:4:160
shadow$provide.module$node_modules$$mui$system$createBox/exports.default/<@http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$system$createBox.js:3:255
div
shadow$provide.module$node_modules$$emotion$react$dist$emotion_element_48d2c2e4_cjs_dev/exports.withEmotionCache/<@http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$emotion$react$dist$emotion_element_48d2c2e4_cjs_dev.js:4:160
shadow$provide.module$node_modules$$mui$system$createBox/exports.default/<@http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$mui$system$createBox.js:3:255
cmp@http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43
cmp@http://localhost:8280/js/compiled/cljs-runtime/reagent.impl.component.js:499:43

i dont know what is wrong but this is my code

(ns fe-learning.components.carousel
  (:require [reagent.core :as r]
            [re-frame.core :as rf]
            ["@mui/material" :as mui]
            ["react-material-ui-carousel" :as carousel]))
(defn CarouselComponent []
  (let [items [{:img "image1.jpg" :title "Item 1"}
               {:img "image2.jpg" :title "Item 2"}
               {:img "image3.jpg" :title "Item 3"}]]
    [:> carousel/Carousel
     {:animation "slide"
      :autoplay true
      :indicators false
      :timeout 3000
      :navButtonsAlwaysVisible true
      :infiniteLoop true}
     (for [item items]
       [:div
        [:img {:src (get item :img)
               :alt (get item :title)}]])]))

is there anything wrong with my code?

p-himik18:04:13

This is the important part: > React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. And this is an important suggestion from that warning: > you might have mixed up default and named imports. Chances are, carousel/Carousel in your code is undefined and you need to import carousel in some other way. Shadow-cljs has a good section on the topic in its docs.

👍 1

Ferguson18:04:05

it took me a while to understand but is the way import carousel wrong? i think i have to read shadow cljs docs 🥲

p-himik19:04:58

Yeah. To confirm, just add (js/console.log carousel) at the top of the ns (but under the ns form itself, of course) and see what it prints.

p-himik19:04:47

If it prints an object that has a default field, then you probably need to use ["react-material-ui-carousel$default" :as Carousel]. If it prints some weird object, then it's probably just ["react-material-ui-carousel" :as Carousel].

Ferguson00:04:08

just find out that i can print import 🤯 print same object with or with out "" when import react-material-ui-carousel

p-himik07:04:00

Well, there you go - there's that default field. Try the first option I suggested above. Of course, it implies that you use it as Carousel instead of carousel/Carousel.

thheller07:04:46

FWIW this is the relevant doc section, showing a bunch of examples of how to translate js import to CLJS. https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages

2024-04-24

Channels