This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-04-21
Channels
- # babashka (16)
- # beginners (182)
- # calva (13)
- # chlorine-clover (43)
- # clj-kondo (17)
- # cljs-dev (14)
- # cljsrn (19)
- # clojure (97)
- # clojure-argentina (7)
- # clojure-dev (45)
- # clojure-europe (7)
- # clojure-germany (5)
- # clojure-nl (4)
- # clojure-portugal (4)
- # clojure-romania (5)
- # clojure-spec (46)
- # clojure-uk (21)
- # clojuredesign-podcast (2)
- # clojurescript (159)
- # conjure (28)
- # core-async (7)
- # cursive (13)
- # datomic (17)
- # defnpodcast (9)
- # duct (1)
- # fulcro (45)
- # graphql (6)
- # jobs (7)
- # jobs-discuss (1)
- # juxt (3)
- # kaocha (4)
- # leiningen (12)
- # malli (5)
- # observability (1)
- # off-topic (50)
- # pathom (15)
- # re-frame (16)
- # reitit (5)
- # remote-jobs (21)
- # ring (7)
- # shadow-cljs (166)
- # test-check (6)
- # tools-deps (27)
- # xtdb (2)
I’m not finding a build hook that’s working for me, looking for some advice. I need to run some code that generates a new routes file (details not really important) based on files in a directory. This should really run before shadow does anything, but there’s not really a hook for that. I’m trying to repurpose my function to run on the :configure
step, and the :compile-prepare
step, but that’s not working so swell
@thheller thanks for the project 🙂. Was running into issues getting react and some npm react components to play nice together, and noticed some funky javascript output with fighweel. switched to shadow-cljs and it fixed my issue.
@haywood if you want something to run before shadow-cljs does anything then run it separately 😛
I'm writing an override of require
for node-test
target how can I make sure it's added at the top of the js file
(function(){
var Module = require('module');
var originalRequire = Module.prototype.require;
Module.prototype.require = function(){
// if react-native module return mock
return originalRequire.apply(this, arguments);
};
and when you run node you run node --require=./your-require-override.js the-output.js
you can make it part of the build also but I prefer to keep hacks in a place I can easily experiment with 😛
hmm the issue is that its not easy to ensure that its actually loaded before require
is first used
it is easier in development because you can abuse :preloads
but there is no :preloads-that-also-apply-in-release
before I go further it seems like my first issue with the react-native modules in node is that they are using import
SyntaxError: Cannot use import statement outside a module
it looks like the issue is that I get a require when it should be an import shadow.js.shim.module$react_native_languages = require("react-native-languages");
yes. most react-native modules cannot be loaded in node. they are packaged with the assumption of going through metro first.
yes that is not a useful path to explore indeed, even if I manage to get them to run in node they will most likely yield odd results or errors
so, i removed my question because I found in the docs the environment variable part but actually it's not what I need, or at least only part of it. I still don't know how I can read the value of anything I pass to shadow-cljs inside my app. I am happy to use --config-merge or anything else, but that's just setting the value, what is the keyword to search for to find how to read what I set there?
@thheller looks like the solution with a separate js file works, on every error I mock the lib that fails and move to the next error. Since I already have the mocks in cljs and I find it more pleasant to write what would be the right approach? So far I have a frankenstein 😄 I put my mock cljs file in the path that is compiled by :test and I wrote an override.js that imports it, probably the worst possible way by copy pasting most of the shadow init code https://gist.github.com/yenda/eae7a492f2a7ea94cb4124ff5ef46f4a
but in general I advise everyone against using environment variables in CLJS builds. just pass that data into your code at runtime instead
assuming you are following the recommendations of having a init
fn that is called when your code is loaded
The problem I am trying to solve is that there are a number of servers I need to connect to depending on the environment
django runs on one port for me, another for others and definitely different port in production
then you adjust whatever generates <script>your.app.init("with-the-data-you-need");</script>
my devenv is devcards, thats' one port but when my boss checks my work, he will use the development build which is served by django in development mode which of course has it's own dev config
... that just exports the problem from shadow-cljs into django, I don't want to learn python 🙂
the thing is, no one wants to use cljs just me, if I have to commit code that changes everyone's codebase, there will be comments
I don't have a clue what you are doing so you are going to have to do something that works for you
I just realized something, I am not doing anything special, I created this project with create-cljs-app. There are no js files with init functions. I am trying to find how to pass data to my apps still, but so far only the closure-defines is the only thing that is somewhat similar, and even that I haven't yet been able to figure out how it actually expected to work. 🙂
I think this create-cljs-app thing uses clojurescript to do this init calling thing since I have something like a main function exported and called with render, and the main function is configured in :init-fn. So if I understand your previous suggestions correctly, I should just write my configuration inside my core.cljs and cards.cljs files that call the render functions
if the build config contains :init-fn some.ns/init
then yes that calls init
without args. you can will put the config into the html via <script>
and access it in into via (js/console.log js/MY_CONFIG)
I'm getting a maximal call stack size exceeded when running my tests
SHADOW import error /home/yenda/status-react/target/test/cljs-runtime/shadow.module.main.append.js
/home/yenda/status-react/node_modules/source-map/lib/util.js:343
function compareByGeneratedPositionsDeflated(mappingA, mappingB, onlyCompareGenerated) {
^
RangeError: Maximum call stack size exceeded
at compareByGeneratedPositionsDeflated (/home/yenda/status-react/node_modules/source-map/lib/util.js:343:45)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:88:11)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
could it be because I have most of the SHADOW_IMPORT statements twice with my require override?
(let [react-dom-server (js/require "react-dom/server")]
(.renderToStaticMarkup react-dom-server src))))
I’m just wondering, is this kind of approach something that Shadow’s npm module system supports?I don't understand the question? shadow-cljs does not bundle js/require
calls in browser builds. if this runs in an environment that has an actual js/require
then it would work but shadow-cljs has no hand in that?
This is for a node build. I guess I’m wondering if in node builds the ns
require is needed for the npm module to be included in release builds? I hope that question makes more sense, sorry 🙂
got it, thanks!
but yes ... if you want shadow-cljs to bundle things then it must be in the ns
form. it does not pick up js/require
calls in the code
it could pick up js/require
calls but that might give people ideas of using it dynamically and so on which won't work
uhm. what’s the difference between “bundle” and “include anything into the build”?
in node builds in general it will create a regular .js
file that still has require
calls in the code
in the browser we obviously can't do that so shadow-cljs does not generate require calls
and instead bundles all the required code into the output directly so it can be loaded at runtime
so a browser build would contain react
and so on while a node build will not (by default)
Ok, I think that makes sense. Bundling isn’t really a (necessary) thing in node.
thanks
you can still enable it if needed but it is off by default since node can just provide it
I don't know what's with me and with clojre(script) tooling, but this continuous struggle of reading thousands of words with no results is really upsetting. I've given up for 8 years because of this, and I really feel like shadowcljs works, but to not be able to do something as simple as to set a build dependent variable for hours, despite getting help from the creator himself, is just upsetting^2. In js I know I have a bundler, browserify or webpack, I select the env plugin, use bash env variables in the terminal, then I can read them either through some module or on global/window. Not nice, but the whole process took less than 30 minutes the first time I had to do it. I've been trying to do this for 4 HOURS continously. I've read everything twice, I don't know what I missed but at this point I wish I could just quite and go fishing instead.
{...
:builds
{:app
{:target :browser
...
:modules {:app {:entries []}}
;; to enable in development only
:dev {:closure-defines { true}}
;; to enable always
:closure-defines { true}
;; you may also enable it for release as well
:release {:closure-defines { true}}
}}
as I described it above, the problem for me here is that this is INPUT, and I would rather read the variable, not just write it
trying to (prn VERBOSE) I only got the value that I defined inline in the file, the config didn't overwrite it
do you use project.clj or deps.edn instead of just shadow-cljs.edn? in that case you might have the wrong clojurescript/closure-library versions in which case closure-defines don't work properly
I now understand the docs with the https://shadow-cljs.github.io/docs/UsersGuide.html#shadow-env
I tried to do two things at once. thanks again @thheller and @U11BV7MTK
Is there a known cause for these sort of maximal call stack size exceeded errors?
Testing status-im.test.chat.models.message
SHADOW import error /home/yenda/status-react/target/test/cljs-runtime/shadow.module.main.append.js
/home/yenda/status-react/node_modules/source-map/lib/util.js:373
function strcmp(aStr1, aStr2) {
^
RangeError: Maximum call stack size exceeded
at strcmp (/home/yenda/status-react/node_modules/source-map/lib/util.js:373:16)
at compareByGeneratedPositionsDeflated (/home/yenda/status-react/node_modules/source-map/lib/util.js:354:9)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:88:11)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
at doQuickSort (/home/yenda/status-react/node_modules/source-map/lib/quick-sort.js:99:5)
I run the tests with yarn shadow-cljs compile mocks && yarn shadow-cljs compile test && node --require ./test-resources/override.js target/test/test.js
override.js is here https://github.com/status-im/status-react/pull/10217/commits/80e7685cc772b8e0aa08f6c9325aeed7266902d5#diff-31223e9c64942d5ed5214807141c977e
this particular test didn't yield any error with the doo+lein stack. I also noticed that there was another test that was failing with the same kind of error, but in that case it was just a test that wasn't run with doo and was wrong, but instead of a proper assertion fail it was throwing this callstack error
try running against a release
build. that won't include the source-map
package (unless you do manually)
interesting start with a warning in release build:
Resource: mocks/js_dependencies.cljs:47:1
constant ReactNative assigned a value more than once.
Original definition at externs.shadow.js:2
but yeah looks like it is related to sourcemap require because I see
Testing status-im.test.chat.models.message
ERROR in (add-received-message-test) (TypeError:NaN:NaN)
Uncaught exception, not in assertion.
expected: nil
actual: #object[TypeError TypeError: lV.a is not a function]
DEBUG [status-im.native-module.core:259] - [native-module] is24Hour
easier to debug
ERROR in (add-received-message-test) (TypeError:NaN:NaN)
Uncaught exception, not in assertion.
expected: nil
actual: #object[TypeError TypeError: status_im.chat.models.message.add_message.cljs$core$IFn$_invoke$arity$2 is not a function]
than random max call stack exceeded 😄Did someone have success in importing react bootstrap in a shadow-cljs project?
npm installed react-bootstrap and I’m not able to do a simple (:require [“react-boostrap/Button” :default Button])
it seems that the react-bootsrap npm module is written in TypeScript
full of .ts files
@haywood yes, tried that too
not to be overly pedantic, but I refer to this chart a lot https://shadow-cljs.github.io/docs/UsersGuide.html#_using_npm_packages
I think the ts files are just the source files, if you look in the package.json it’ll point to the package’s main directory
I’ve found the js files, in node_modules/react-bootstrap/esm
but requiring [“react-boostrap/esm/Button” :as Button] doesn’t work
Search in: /Users/arusso/Development/clojurescript/dias-web/node_modules You probably need to run: npm install react-boostrap/esm/Button
maybe I can force the resolver by telling something like this?
:js-options {:resolve {“react-bootstrap” {:target :npm :require “react-bootstrap/esm”}}}
doesn’t work 😩
I wouldn't want to use esm modules yet if I could avoid it. Is that package published using exclusively those?
I don’t know
I nee to check that
in any case, the link above to the UserGuide explains how to load npm packages, the npm error saying that you have to iunstall react-bootstrap/esm/Button sounds wrong
https://react-bootstrap.github.io/getting-started/introduction/#importing that's how the docs says it should work
yes I tried it also
always the same:
Search in: /Users/arusso/Development/clojurescript/dias-web/node_modules You probably need to run: npm install react-boostrap/Button
thanks
I’m using this template project:
lein new re-frame <project-name>
just do a npm install react-bootstrap
the package.json points to main: cjs/index.js
, and if you go to that file it’s exporting everything
Did it work for you? I’m trying it but without success
It works! Wonderful, I was sure I tried also that! Thank you very much @haywood
I need to run a process that reads files from one of my apps directories, this process creates and writes a new clojurescript file to disk, which Shadow knob should I be using? It should run during startup and on changes.
I’m quite new to Clojurescript but have quite a bit of experience with Clojure. I’m interested in
interacting with Excel using @microsoft/office-js``. I use the shadow-cljs re-frame example for
experiments and modified the namespace declaration in
views.clj`` to be
(ns demo.views
(:require [demo.routes :as routes]
[demo.subs :as subs]
[re-frame.core :as re-frame]
["@microsoft/office-js" :as office]))
and get the error
[:app] Compiling ...
[:app] Build failure:
module without entry or suffix: @microsoft/office-js…
ExceptionInfo: module without entry or suffix: @microsoft/office-js
Clojure.core/ex-info (core.clj:4739)
clojure.core/ex-info (core.clj:4739)
shadow.build.npm/find-package-require (npm.clj:207)
shadow.build.npm/find-package-require (npm.clj:165)
shadow.build.npm/find-file (npm.clj:387)
shadow.build.npm/find-file (npm.clj:358)
shadow.build.npm/find-resource* (npm.clj:618)
shadow.build.npm/find-resource* (npm.clj:610)
Any hints to where I might start looking for the problem?that package looks a bit weird https://www.npmjs.com/package/@microsoft/office-js#using-the-npm-package
it’s sorta saying you can copy the file in the dist directory to your static server, or you need to compile it yourself?
easiest thing to do for now would be to `
<script src="/assets/office-js/office.js"></script>
I’ll try that - thanks