Fork me on GitHub
#shadow-cljs
<
2020-10-26
>
wombawomba10:10:23

For JS libraries (e.g. https://github.com/Microsoft/monaco-editor) that offer multiple approaches to modules (AMD, ESM + Webpack, ESM + Parcel, …), which one should I go with if I’m using shadow-cljs?

thheller10:10:27

IIRC the last time I tried to use that package myself it tried to do a bunch of dynamic import which shadow-cljs doesn't support

thheller10:10:42

but that has been at least a year so no idea what the current state is

thheller10:10:37

looks like it still does that crap when it even requires custom webpack config/plugin to use https://github.com/microsoft/monaco-editor/blob/master/docs/integrate-esm.md

thheller10:10:26

you can just use the AMD version and manually embed it in the page and not in the actual CLJS build

thheller10:10:30

or use webpack

wombawomba10:10:11

Phew, that was quick 🙂

wombawomba10:10:21

Anyway great advice, thanks… any reason to pick AMD over webpack or vice versa?

wombawomba10:10:02

Actually I think I’ll just bite thee bullet and set up webpack as described in https://code.thheller.com/blog/shadow-cljs/2020/05/08/how-about-webpack-now.html

thheller10:10:20

did you try it without?

thheller10:10:27

I mean it might work? I don't have a clue

thheller10:10:42

if you just want an editor in a html page try codemirror. that one works and is used by many people.

thheller10:10:02

from the looks of the ESM docs it seems like it might work

wombawomba10:10:04

I did try codemirror already actually, but I like the look of monaco so I want to see if I can get that one working instead

wombawomba10:10:33

I didn’t try it with shadow-cljs yet, but okay. I’ll see if I can get ESM to work with shadow-cljs and fall back to whichever of ASM and webpack I can get working first 😉

thheller10:10:17

getting the worker stuff to work will be the tricky part

thheller10:10:21

but other than that it seems fine

wombawomba10:10:16

Alright.. out of curiousity, why would the worker stuff be tricky? Because of something the workers do?

thheller10:10:57

ok nevermind it is not going to work. I did a quick test and it is importing css. so webpack it is

thheller10:10:17

worker stuff just needs to be configured, so it just doesn't work out of the box

wombawomba10:10:45

Okay then 🙂

thheller10:10:22

AMD also works. then you don't even have to setup webpack.

wombawomba10:10:39

BTW, you wouldn’t happen to have a recommended way of running webpack --watch and shadow-cljs watch? Curious if there’s a way to have both without running two terminal windows

thheller11:10:42

plenty of ways to do that

thheller11:10:57

nowadays I prefer separate terminals for stuff

wombawomba11:10:06

So I got AMD working, but I decided to see if I could go with https://www.npmjs.com/package/@monaco-editor/react instead to save myself from having to write a bunch of glue code. However, when I try to load that, shadow-cljs gives me the following error: browser.cljs:38 Failed to load my-project/monaco.cljs TypeError: Cannot redefine property: DiffEditor. Do you think there’s a way around this, or should I give up? 🙂

wombawomba11:10:41

(sorry for all these questions BTW, I’m new to the JS ecosystem and it’s absolutely bewildering to me)

thheller11:10:58

its bewildering for everyone 😉

thheller11:10:18

don't know what that error is. don't know what you are doing in your code

wombawomba11:10:03

I’m doing (ns my-project.monaco (:require ["@monaco-editor/react" :refer [Editor]])) and then nothing else

thheller11:10:44

don't know what the react package is doing either

thheller11:10:00

it likely just wraps the ESM package no?

wombawomba11:10:15

Perhaps there’s some sort of conflict happening with some other JS lib I’ve previously run? I’ll see if I can reproduce from a clean slate

thheller11:10:04

it likely isn't worth using the react wrapper

thheller11:10:25

just write the 5 lines to do that yourself and save the headache of making that lib work

Michael W19:10:00

how can I troubleshoot shadow giving me a stale output error? I see my build running in the web console, with warnings. But when I connect to my app shdow-cljs gives me a stale output error, though the app runs. I cleared my js, and the .shadow-cljs folder and restarted my watch but it still says stale output even though it was forced to recompile everything from complete scratch.

thheller20:10:22

just make sure you are loading the correct file

thheller20:10:44

could be loading an old one from a different path or so

thheller20:10:55

frequently happens if you change you :modules config or :output-dir

thheller20:10:15

or can happen if you have 2 shadow-cljs instances running for your project competing with each other

thheller20:10:19

make sure there is only one running