I’m trying to set up a UI library using React+Typescript+Storybook+MaterialUI and consume it as a library in clojurescript. I’ve been able to export a commonjs file and require it from my reagent app, but the styles are not applied. Seems material ui uses css-in-js which I’m not familiar with. Grepping the dist file the styles seem to be present. Any idea how to debug this?

changing from commonjs output to esm seems to have worked. only snag is I have to edit the output file and replace import * as React from "react"; with import React from "react";

the user guide says: > Due to strict checking of the Closure Compiler it is not possible to use the import * as X from "npm"; syntax when requiring CLJS or npm code. It is fine to use when requiring other JS files. I output an es module into a file foo.js and require it like: (ns my.ns (:require ["/foo" :as foo])) . From the text quoted above shouldn’t this be fine?

hello. an FYI for ppl using devcards. I found that upgrading shadow to 2.19.3 my previously working devcards setup had a couple of problems. I have some initial workarounds I wrote up here: https://github.com/jacekschae/shadow-cljs-devcards/issues/1

anyone using jspdf with shadow-cljs? I’m seeing this build failure after npm installing it. Seems that the closure compiler isn’t a fan of jsPDF’s minifier?

[:app] Build failure:
Closure compilation failed with 1 errors
--- node_modules/jsPDF/dist/jspdf.es.min.js:10686
Block-scoped variable Vt declared more than once. First occurrence: node_modules/jsPDF/dist/jspdf.es.min.js:9530:13

hmm yeah I've seen those errors on occasion

never can tell if they are actual legit errors or the closure compiler just parsing things wrong

unfortunately nothing I can do from the shadow-cljs side of things

you can try the non-minified version by requiring "jspdf/dist/jspdf.es.js" instead of just jspdf

shadow-cljs will minify it anyways so nothing lost

seems like the issue is with how jspdf packages itself and not just its minifier

[BABEL] Note: The code generator has deoptimised the styling of /Users/yedi/Documents/workspace/mobot/mobot-web/node_modules/jspdf/dist/jspdf.es.js as it exceeds the max of 500KB.
[:app] Build failure:
Closure compilation failed with 1 errors
--- node_modules/jspdf/dist/jspdf.es.js:3834
Block-scoped variable ga declared more than once. First occurrence: node_modules/jspdf/dist/jspdf.es.js:3834:4095

i wonder if it makes sense to use the cljsjs jspdf artifact if requiring it through npm doesn’t work… though i can’t imagine noone is using jspdf with shadow-cljs

you can also try the jspdf.umd.js file

you can use the cdn artifact

cljsjs is not supported so that won't work

hm new build failure with umd

[:app] Compiling ...
[2022-06-14 14:33:09.670 - INFO] :shadow.build.npm/js-invalid-requires - {:resource-name "node_modules/jspdf/dist/jspdf.umd.js", :requires [{:line 15743, :column 14} {:line 15777, :column 14} {:line 25168, :column 14}]}
[:app] Build failure:
The required JS dependency "worker_threads" is not available, it was required by "node_modules/jspdf/dist/jspdf.umd.js".

hmm yeah thats not any better. you can set :js-options {:resolve {"worker_threads" false}} in your build config

maybe that helps

not sure if this is relevant to shadow but I’m trying to require a module i’ve created:

// src/stack.jsx
import * as React from "react";
import Button from "@mui/material/Button";
function stack_default() {
  return /* @__PURE__ */ React.createElement(Button, {
    variant: "contained"
  }, "Hello World");
}
export {
  stack_default as stack
};

(ns 
  (:require
   [reagent.core :as r]
   [reagent.dom :as rdom]
   ["components" :as c]))

(let [elem (.getElementById js/document "app")]
    (rdom/render [:f> c/stack] elem))

this works though, which I don’t understand:

(ns 
  (:require
   [reagent.core :as r]
   [reagent.dom :as rdom]
   ["@mui/material" :as mui]))
(let [elem (.getElementById js/document "app")]
  (rdom/render [:> mui/Button {:variant "contained"} "Hello World"] elem))

adding :entry-keys ["module" "browser" "main"] seems to have fixed it :thumbsup:

no, still issues 😕 I have the following layout:

src/ <- on classpath
packages/foo <- a npm package
packages/foo/dist/index.js <- file I want
packages/foo/node_modules <- foo's dependencies

{
  ...
  "module": "dist/index.js",
  ...
}

{:dependencies
 [[reagent "1.1.1"]]

 :source-paths
 ["src"]

 :dev-http {8080 {:root "public"}},
 :builds
 {:app {:target :browser
        :output-dir "public/js"
        :asset-path "/js"
        :js-options {:js-package-dirs ["packages" "node_modules"]
                     :entry-keys ["module" "browser" "main"]}
        :modules {:main {:entries []}}}}}

I think there’s an issue with js-package-dirs being searched recursively, so my js module gets react from packages/foo/node_modules while reagent gets it from node_modules

why do you have nested node_modules?