Issue around OJS Compilation with Code Mirror

[zachcp]

Bug description

Background

• I am working to port an Observable Framework page to work in Quarto.
• Here are the Framework source and live components
• The page uses 3 JS components - CodeMirror for code; molstar for molecules; squint for in-browser compilation of cljs->js.
• My WIP repo for this project is here
• A straight port didn't work due to differences in the compilation steps in Observable vs Quarto.
• I can get each other components to work however, when I attempt to enable some of the additional features of Codemirror, I start hitting some errors.
• I am not really sure where in the compilation stack these are getting triggered and would appreciate an eyeball or two from an expert.

The Error

Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

• Based on the error I think that import may not be happening in the OJS compilation step but later in the browser and I have some internal mismatch between multiple imported versions of @codemirror/state
• I can imagine a fix by using require and having the issue resolved in the compilation step (I tried a bunch of variations but couldn't get my imports to work properly.)
• I can imagine a fix by handling the component initialization outside of OJS (although it loses some of the portability that I am hoping to Gian by moving to Quarto).

I would greatly appreciate any suggestions or pointers on fixes.

// my imports
// note I tried the require method found in https://quarto.org/docs/interactive/ojs/libraries.html#modules

squint_core = import("https://cdn.jsdelivr.net/npm/[email protected]/src/squint/core.js");
squint = import("https://cdn.jsdelivr.net/npm/[email protected]/lib/compiler.js");

// make this available in the outerscore
window.squint_core = squint_core;

molstar = require("[email protected]/build/viewer/molstar.js");

clojure_mode = import("https://cdn.jsdelivr.net/npm/@nextjournal/[email protected]/+esm");
code_mirror_view = import("https://cdn.jsdelivr.net/npm/@codemirror/[email protected]/+esm");
code_mirror_state = import("https://cdn.jsdelivr.net/npm/@codemirror/[email protected]/+esm");
code_mirror_commands = import("https://cdn.jsdelivr.net/npm/@codemirror/commands/+esm");
code_mirror_language = import("https://cdn.jsdelivr.net/npm/@codemirror/language/+esm");
clojure_mode_extensions = import("https://cdn.jsdelivr.net/npm/@nextjournal/clojure-mode/extensions/eval-region/+esm")

Steps to reproduce

git clone https://github.com/zachcp/qsquint
cd qsquint
quarto preview

Actual behavior

I get a compilation issue as below but only when I am attempt to pass in one of the Clojure-mode extensions.

Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

Expected behavior

I would like the JS to compile and initiate my components.

Your environment

• IDE: ZED
• OS: Mac OS Sequoia

Quarto check output

quarto check
Quarto 1.7.29
[✓] Checking environment information...
      Quarto cache location: /Users/zcpowers/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.29
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/zcpowers/Library/TinyTeX/bin/universal-darwin
      Version: 2024

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
      Source: MacOS known location

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.9 (Conda)
      Path: /Users/zcpowers/miniconda3/bin/python
      Jupyter: 5.7.2
      Kernels: blender, python3


[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.4.1
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/library
      knitr: 1.49
      rmarkdown: 2.29

[✓] Checking Knitr engine render......OK

[mcanouil]

FYI, Molstar has already been ported to Quarto as a Quarto extension:

• https://github.com/jmbuhr/quarto-molstar (found on https://m.canouil.dev/quarto-extensions/)

Also, Observable.js is not JavaScript, in case there is a confusion.

[zachcp]

Thank you @mcanouil - I've contributed to that extension. What I am now trying to do is embed a live JS CodeMirror instance to control the Molstar component. And I was hoping that compilation would work with Quarto as then it would be straightforward to package it as an extension.

you guys are doing great work, here. thank you.

[cscheid]

I don't have much confidence in my answer here, but if codemirror doesn't support multiple parallel versions of the library running in the same JS environment, I think you simply won't be able to make this work without changes in codemirror itself.

You could set a debugger stop in the OJS code cell before the imports, and then use your browser's development tools to go deeper. With that said, I expect that addressing this will require a fair bit of expertise on codemirror and its extension infrastructure.

[zachcp]

Yeah. I think this is what's happening. I've got an idea for a workaround but it's not exactly elegant. Thank you both.