"Tags with side effect (<script> and <style>) are ignored in client component templates" error on WGLMakie + DocumenterVitepress

[mofeing]

I'm trying to plot some graphs with GraphMakie and WGLMakie on my docs. I'm trying to make it work with DocumenterVitepress.jl but I'm running into the following error:

[vitepress] Internal server error: Tags with side effect (<script> and <style>) are ignored in client component templates.
  Plugin: vite:vue
  File: /Users/mofeing/Developer/Tenet.jl/docs/build/.documenter/manual/ansatz/mps.md:9:7
  7  |      <div>
  8  |        <script src="bonito/js/Bonito.bundled.js" type="module"></script>
  9  |        <style></style>
     |         ^
  10 |        <div></div>
  11 |      </div>
      at Object.createCompilerError (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1364:17)
      at createDOMCompilerError (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:122:23)
      at Array.ignoreSideEffectTags (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:687:7)
      at traverseNode (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3538:38)
      at traverseChildren (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3530:5)
      at traverseNode (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3573:7)
      at traverseChildren (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3530:5)
      at traverseNode (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3573:7)
      at traverseChildren (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3530:5)
      at traverseNode (/Users/mofeing/Developer/Tenet.jl/docs/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3573:7)

I'm not sure where to open this issue but it seems like an interoperation issue between Bonito and DocumenterVitepress. Specifically, the error seems to come from Vue not accepting simple <style> and <script> tags (script with the src attribute seems to work) so it seems to be difficult to fix from DocumenterVitepress.

It strikes me a lil bit that this doesn't work when Makie docs use DocumenterVitepress? is there some workaround or WGLMakie is not used at all in the Makie docs?

MWE

• Bonito v4.0.0
• Makie v0.21.16
• GraphMakie v0.5.12
• WGLMakie v0.10.16
• Documenter v1.8.0
• DocumenterVitepress v0.1.3

Put this code inside a @example code block:

using Makie, Graphs, GraphMakie, WGLMakie, Bonito

Page(offline=true)
WGLMakie.activate!()
Makie.inline!(true)
set_theme!(resolution=(800,200))

g = Graph(4)
graphplot(g)

[SimonDanisch]

It strikes me a lil bit that this doesn't work when Makie docs use DocumenterVitepress

Switching to DocumenterVitepress nuked the WGLMakie support for our docs :(
See: MakieOrg/Makie.jl#4452

[SimonDanisch]

We need to figure out how to tell vitepress to not sanitize the <script> tags