Weird bug on windows computer

[mika-long]

I am encountering a weird bug on a windows computer when I follow the instructions and render the .qmd file.

Following the installation instructions, when I render and look at the generated example.html file, I found this weird escape for Circles.js:

<script type="module">
      // when the doc is ready, find quarto's ojs and inject svelte import
      document.addEventListener("DOMContentLoaded", () => {
        
        import(".\Circles.js").then(svelteModule => {
          
          const ojsModule = window._ojs?.ojsConnector?.mainModule
          if (ojsModule === undefined) {
            console.error("Quarto OJS module not found")
          }
  
          // TODO - check to see if there's already a variable with that name
          const svertoImport = ojsModule?.variable()
          svertoImport?.define("Circles", svelteModule)

        })

      })
    </script>

By manually changing .\ to ./ I get the correct output. How can I fix this bug?

[jimjam-slam]

Hi @mika-long! Are you experiencing any actual problems with the output? Paths on Windows are separated by \, not /, so this is what I would expect to see if you're rendering on Windows!

[mika-long]

Hmm I see! Thanks for the speedy response! I'm still a bit confused about the bug I'm experiencing.
So this is the output that I get after rendering example.qmd:

If I then examine the generated example.html file, I see this:

If I change .\ to ./ I get this:

I should note that I tried to debug this on my own by running npm audit after running npm install and that appears to have changed the version of svelte? Before the npm audit I would see 5 circles of varying sizes appearing in the same spot that is currently giving an OJS error.

[jimjam-slam]

If you're getting "Circles is not defined", thats' definitely a problem! So you're saying that after you changed the path separator to ./ but before you ran npm audit, it was working?

Can I also confirm: are you seeing this error when you run quarto preview, or only when you host the page with a web provider like GitHub Pages or Netlify?

Re. the second part of your post: if you inspect package-lock.json, you can see the version of Svelte that NPM has actually installed. The version that should be installed (defined in package.json) is "the latest Svelte 3.x" (this will likely change in the next major version of Sverto, as Svelte is currently up to version 5 and and has some major breaking changes!).

I can't speak to what npm audit has done, but if you delete the node_modules folder and package-lock.json, that'll take you back to a point where you can run npm install again to get the out-of-the-box Sverto experience.

[jimjam-slam]

The path separator \ ultimately comes from pandoc.path.directory(), which was likely designed for local use, not for web paths. So it may be that I need to convert that before the JavaScript gets written to fix the problem you (and likely other Windows users) are seeing!

[jimjam-slam]

@mika-long I've pushed a tentative fix: if you could delete the following:

• node_modules folder
• package-lock.json
• package.json

Then try installing the fix by running:

quarto use template jimjam-slam/sverto#issue29-Weird-bug-on-windows-computer

And finally run npm install and see if you can render and preview. If that works, I'll merge the fix and we can roll out a new minor version of Sverto 😊

[mika-long]

Wow! Thanks for the speedy fix! I've deleted all the files but I can't install the fix with the above command. After copying, pasting, and running the code, it gives the error Extension not found in local or remote sources. How can I fix this?

[jimjam-slam]

@mika-long My mistake! I had both the syntax and the branch name wrong:

quarto use template jimjam-slam/sverto@jimjam-slam/issue29-Weird-bug-on-windows-computer