SSR explodes

[hiredman]

This runs for a while

% clj -Sdeps '{:deps {io.github.nextjournal/clerk {:mvn/version "0.13.842"}}}'
Clojure 1.11.1
user=> ((requiring-resolve 'nextjournal.clerk/build!) {:paths ["Sync/src/ir-notebook.clj"] :ssr true :output-path "/home/kevin/.local/tmp"})
👷🏼 Clerk is building 1 notebooks…
🧐 Parsing… Done in 492.096ms. ✅
🔬 Analyzing… Done in 946.555ms. ✅
🔨 Building "Sync/src/ir-notebook.clj"… Done in 389.608ms. ✅
🧱 Server Side Rendering…

Then spits out what seems to be the rendering of the notebook as html as part of an error message that ends with:

(node:874841) ExperimentalWarning: Network Imports is an experimental feature and might change at any time
    at emitExperimentalWarning (node:internal/util:273:11)
    at new DefaultModuleLoader (node:internal/modules/esm/loader:109:7)
    at createModuleLoader (node:internal/modules/esm/loader:424:10)
    at loadESM (node:internal/process/esm_loader:18:19)
    at evalModule (node:internal/process/execution:51:28)
    at node:internal/main/eval_stdin:29:5
    at Socket.<anonymous> (node:internal/process/execution:205:5)
    at Socket.emit (node:events:523:35)
    at endReadableNT (node:internal/streams/readable:1367:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
https://storage.clerk.garden/nextjournal/clerk-assets@27N1QPbuHKe9U4oeTAJPmQ69pphG/viewer.js?immutable=true:1928
nb.redirected&&!U.has(nb.url)&&U.set(nb.url,ab);return nb.json()}));return ab}function v(Ya){function ab(Kb){if("string"!==typeof Kb)return Kb;let Ub=hc.get(Kb);Ub||hc.set(Kb,Ub=new Promise((ya,fb)=>{const Ga=document.createElement("script");Ga.onload=()=>{try{ya(W.pop()(nb(Kb)))}catch(ob){fb(new Sa("invalid module"))}Ga.remove()};Ga.onerror=()=>{fb(new Sa("unable to load module"));Ga.remove()};Ga.async=!0;Ga.src=Kb;window.define=T;document.head.appendChild(Ga)}));return Ub}function nb(Kb){return Ub=>
                                                                                                                                                                                                                 ^

ReferenceError: document is not defined
    at https://storage.clerk.garden/nextjournal/clerk-assets@27N1QPbuHKe9U4oeTAJPmQ69pphG/viewer.js?immutable=true:1928:210
    at new Promise (<anonymous>)
    at ab (https://storage.clerk.garden/nextjournal/clerk-assets@27N1QPbuHKe9U4oeTAJPmQ69pphG/viewer.js?immutable=true:1928:179)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v20.2.0
 1: 0x7f1d0a87a17c node::Abort() [/lib64/libnode.so.115]
 2: 0x7f1d0a88d2f2  [/lib64/libnode.so.115]
 3: 0x7f1d0beba8fa v8::internal::FunctionCallbackArguments::Call(v8::internal::CallHandlerInfo) [/lib64/libnode.so.115]
 4: 0x7f1d0bebae58  [/lib64/libnode.so.115]
 5: 0x7f1d0bebb644 v8::internal::Builtin_HandleApiCall(int, unsigned long*, v8::internal::Isolate*) [/lib64/libnode.so.115]
 6: 0x7f1d0bd28df6  [/lib64/libnode.so.115]

[mk]

This small doc works here:

mk@mkair ~/d/test> cat ssr.clj 
;; # Testing SSR
(inc 41)
mk@mkair ~/d/test> clj -Sdeps '{:deps {io.github.nextjournal/clerk {:mvn/version "0.13.842"}}}'
Clojure 1.11.1
user=> ((requiring-resolve 'nextjournal.clerk/build!) {:paths ["ssr.clj"] :ssr true})
👷🏼 Clerk is building 1 notebooks…
🧐 Parsing… Done in 47.629ms. ✅
🔬 Analyzing… Done in 66.117ms. ✅
🔨 Building "ssr.clj"… Done in 6.871ms. ✅
🧱 Server Side Rendering… Done in 1251.799ms. ✅
📦 Static app bundle created in 1260.527ms. Total build time was 1382.309ms.
"📦 Static app bundle created in 1260.527ms. Total build time was 1382.309ms.\n"
user=> 
mk@mkair ~/d/test [SIGINT]> node --version
v20.0.0

Can you check if that fails for you as well so we can see if it's about the doc or the environment?

[hiredman]

looks like it is the doc :/ the ssr.clj above renders

[mk]

@hiredman can you share your doc or a failing excerpt?

[hiredman]

I removed a vega-lite chart and now it renders

[zampino]

ReferenceError: document is not defined

All viewers which manipulate DOM nodes as vegalite or plotly aren't suitable for SSR builds because we're generating html using node at the moment. We should at least try to make it clear in a more informative error?

[respatialized]

@hiredman If you need pre-rendering of vega-lite plots for a SSR context, the darkstar library uses GraalJS to convert a vega/vega-lite spec to SVG. I think it would be a suitable workaround for your use case.

[borkdude]

I guess not all JS libs are suited for SSR and this isn't something clerk can fix, probably. Good to close @mk or want to keep this open?

[borkdude]

Unless we're willing to support multiple SSR backends, like a headless browser for example. Could be worth exploring.