hey! I can see that shadow puts the nrepl port into a file called .shadow-cljs/nrepl.port - is there anyway to get cursive to pick this up automatically?

https://github.com/dazld/frontend-playground < I’ve put together some boilerplate and wanted to update the readme

not yet https://github.com/cursive-ide/cursive/issues/2216

Is there a guide to integrate Dirac to shadow-cljs?

@neo2551 no, AFAIK, I’d like to look into it

I guess, we will need something like this: https://github.com/binaryage/dirac/blob/master/examples/figwheel-main/src/repl/dirac_figmain/repl.clj, run shadow-cljs nREPL server, start there Dirac Agent and teach dirac middleware to understand shadow-cljs internals

i'm attempting to use react-bootstrap with shadow-cljs and i'm seeing a weird behaviour. loading the compiled js in the browser throws an exception [1] only on the first load and nothing is rendered, and then any subsequent hot-reload renders the button just fine. can anyone seem what i'm doing wrong? 🙂

(ns myproject.views
  (:require
    [reagent.core :as r]
    ["react-bootstrap" :refer [Button]]))

(defn home-panel []
  (fn []
    [(r/adapt-react-class Button) {:variant "primary"} "Test 1"]))

Uncaught TypeError: (0 , _uncontrollable.default) is not a function
    at Object.shadow$provide.module$node_modules$react_overlays$Dropdown (Dropdown.js:306)
    at shadow.js.jsRequire (js.js:63)
    at Object.shadow$provide.module$node_modules$react_bootstrap$Dropdown (Dropdown.js:19)
    at shadow.js.jsRequire (js.js:63)
    at Object.shadow$provide.module$node_modules$react_bootstrap$index (index.js:84)
    at Object.shadow.js.jsRequire (js.js:63)
    at Object.shadow.js.require (js.js:97)
    at myproject.views.js:6

@joshkh I suspect that you have a dependency conflict somewhere

check if the node_modules/react-bootstrap/node_modules folder exists

and if so which dependencies are in it

looking at the node_modules/react-bootstrap/node_modules/package.json i do see some potential conflicts, mainly react and react-dom which i have in my own root package.json. how might i go about resolving dependency conflicts? in figwheel land i would use a combination of :excludes and top level dependencies.

uhm that isn't what I asked

node_modules/react-bootstrap/node_modules/package.json this shouldn't even exist?

did you mean node_modules/react-bootstrap/package.json ?

ah sorry, long day at work. there is no node_modules directory in node_modules/react-bootstrap.

when npm installs a package with a dependency conflict it installs conflicts in a nested node_modules directory

so that package didn't have any conflicts, its deps may still have though

I forgot what the npm command for this was

npm list or something

okie dokie, i'll dig into it. thanks for the help!

(0 , _uncontrollable.default) this looks very suspiciuous though so might be something else

yeah. and all subsequent hot-reloads work just fine.

yeah found the problem

react-bootstrap requires react-overlays which wants "uncontrollable": "^6.0.0"

but react-bootstrap installs "uncontrollable": "^7.0.0"

react-overlays has the nested install (so node_modules/react-overlays/node_modules/uncontrollable/...)

ah, gotcha! thanks for digging into it. i'm only just reacquainting myself with npm after spending a long time (happily) avoiding it.

is there an idiomatic way to resolve it?

Referring to this chapter from the documentation (https://shadow-cljs.github.io/docs/UsersGuide.html#_requiring_js), I am trying to mix javascript and clojurescript. I converted my JSX files with Babel, however the following line import React, { Component } from 'react'; leads me to the error Requested module does not have an export "Component". when I import the file. Does anyone have an idea how to solve this issue?

@neo2551 yeah that is not supported and wouldn't work in webpack5 either

they just currently have this compatibility mode that still allows this, just won't in the future

import React from "react"; and React.Component should do it

ok! Thanks a lot!

@joshkh not sure that can actually be resolved. in webpack it'll happily use 2 versions of the same library but that isn't supported in shadow-cljs because I think that is nonsense

webpack craziness is what drove me to shadow-cljs. 😉 i understand

@thheller Are there anyway to get something else than the default export?

what do you mean?

In the example you provided me for importing react

is there a way to get React is the default export

they should all be properties of the React export

but no direct :refer

I understand, I am trying to explain my problem with the example of react

and apply it to other libraries

react itself is packaged as commonjs, shadow-cljs and closure-compiler only support strict-style commonjs -> ESM interop (as will webpack5)

guess, I will have to study JS(hit) a bit

and with strict interop the ESM can only use a default export from commonjs

it depends on how the package is packaged. if is it actual ESM code or commonjs (ie. compiled by babel)

the situation is a bit icky currently as many packages are switching from the compatible style to the strict style

thus breaking those that still expect the compatible style

it is a complete mess 😛

🙂

Sorry for the newbee questions xD

if you have specific examples I can make suggestions but it is a pretty broad topic

I am trying to improt this type of dependencies

https://github.com/plotly/react-chart-editor/blob/master/src/index.js

the webpack folks have been talking about this for a while now https://www.youtube.com/watch?v=p-MhcctQBlY

but it still isn't out yet so we'll see how that goes

Thanks, I am totally new to JS, I started UI on the web with shadow-cljs, so have been totally protected from all that. xD

well not totally protected since you are exposed to all npm packages 😉

might actually be smoother in webpack for now given that it still supports the old stuff

Yes, I accept a bit of impurity (Clojure is meant to be practical xD)

what is the actual problem though?

I hope you are not trying to put react-chart-editor on the classpath and import directly?

I would like to use this statement in a custom jsx file import PanelMenuWrapper from 'react-chart-editor';

nope, I am trying to build custom js file, export them through babel

that doesn't look right?

import RCE from "react-chart-editor"; and then RCE.PanelMenuWrapper?

nope, because PanelMenuWrapper becomes the default exort

and the default export is not one that embeeds all of them

no, there is only one default export

PlotlyEditor is the default export

with the name that you give it. the name is completely up to you.

just like clojure (:require [some.thing :as whatever-you-want])

the alias has no relation to the actual name

thanks for the precision! The issue is the default export is a (extremely restricted) subset of the exposed variable in the index.js file

import PlotlyEditor from './PlotlyEditor';
import DefaultEditor from './DefaultEditor';
import EditorControls from './EditorControls';
import {EDITOR_ACTIONS} from './lib/constants';

export {DefaultEditor, EditorControls, EDITOR_ACTIONS};

export * from './lib';
export * from './components';
export * from './default_panels';

export default PlotlyEditor;

don't ever look at the source code

it is lying to you more often than not

haha, the best advice ever xD

the easiest way I find to inspect what is going on is doing

shadow-cljs browser-repl

(require '["react-chart-editor" :as x])

(js/console.dir x) then look at the object in the browser-repl browser console

one thing you can also do is just use commonjs

so in your .js files just use const RCE = require("react-chart-editor");

that isn't subject to the commonjs->ESM interop stuff

ohhhh this seems cool

so RCE might have the full set of properties

the funny stuff is

the cljs version works, I get full access to everything.

but not the jsx

try the commonjs style (ie. use require not import)

nope, still gives me PlotlyEditor

Althgough Babel translate it to

const RCE = require('/node_modules/react-chart-editor/lib/index.js');

I think you mean shadow-cljs did that part?

babel should leave it as require("react-chart-editor")?

the shadow-cljs part works totaly fine

yes but please be clear in which files you are talking about

The workflow is: custom JSX -> babel -> cljs

you have JSX. that is transformed by babel, that is then transformed by shadow-cljs

I am editing the custom JSX file

so check the babel output what that does

I hope you are not putting node_modules on the classpath?

nope 🙂

const RCE = require('react-chart-editor');is the output babel

good 🙂

shadow-cljs adjusts the paths so you know which files were actually used

(and to work around a problem in the Closure Compiler)

shadow-cljs is great 🙂

but yeah RCE should have all the stuff you want?

nope, when I enter console.log(RCE.Button); I get undefined

hmm actually it might not have

funnily enough on shadow-cljs I get something xD

but then shadow-cljs should have either?

yes shadow-cljs have either. This is what kills me xD. I can write better js in cljs than in js

so if you console.log(RCE) in the JS you get different output then (:require ["react-chart-editor" :as x]) and (js/console.log x)?

that should match?

nope.

JS -> undefined, cljs -> {default f} and when you open it you get the whole shebang of objects.

with console.log(require("react-chart-editor"))?

that shouldn't be undefined?

oh or does it throw an error in the browser console while loading?

that isn't handled well currently

I get f PlotlyEditor(props) for js, against the expected {default: f, ...}

hmm thats weird

but we are talking about require here yes? definitely not import?

yes

definitively require

I copy past your code

so there is no import in the file at all anymore I mean?

let me try again

with a minimal example

ok, with minimal example, it still output the default export from index.js

const RCE = require('react-chart-editor');

console.log(RCE.PanelMenuWrapper);
console.log(require('react-chart-editor'));
const CustomEditor = function (props, context) {
  return React.createElement("div", null);
};

export default CustomEditor;

got undefined, and PlotlyEditor as output in the browser

try console.dir(RCE)

and don't mix module styles

ƒ PlotlyEditor(props)

module.exports.default = CustomEditor

geez how gigantic is this react-chart-editor package

seems like it is downloading the entire internet right now

you remember when I asked you how to load npm packages in the browser and you said to me to use the "eval" option somehwere in the config?

this was because of that XD

yeah. are the no smaller alternatives? 😛

I wish. 🙂 My rationale was that it would require me a lot of work to rewrite the stuff in re-frame.

They have a two way communication between the editor and plot, and plotly have a gigantic amount of options.

(obviously I could start small), but I doubt my employer would accept me saying: I can't use JS, so I reimplemented the wheel xD

but if it does not work, I will just go with the slow way, it is just annoying. I tried to reimplent some part directly in CLJS, but the I don't understand how they bind this in their subcomponent.

Well thanks, I need to go to sleep but it was really nice and enjoyable to talk to you @thheller

hope you find a way to sort it out 😛

Reinventing the wheel

Works all the time

it is completely possible that you are just running into an edge case in the shadow-cljs JS support

not many people use it and it definitely can have issues 😛