codeswing icon indicating copy to clipboard operation
codeswing copied to clipboard

[Bug] Vue component swings seem broken

Open SimonEast opened this issue 7 months ago • 1 comments

I just went to try out creating a Vue component swing:

  1. Run "CodeSwing: New swing..."
  2. Choose "Components: Vue.js"

...and all I can see is some broken code in the preview pane:

Image

I also tried it on a clean profile with no extensions and the same thing occurred. Is this bug happening for others?

I also tried React, and that produces a blank white screen. No content appears. Perhaps that is broken also? HTML/JS swings seem fine.

SimonEast avatar May 26 '25 02:05 SimonEast

I hunted through the developer console for errors and there seems to be 2 key issues I've identified so far:

  1. https://cdn.skypack.dev/vue is failing to load. Perhaps it should be imported from https://unpkg.com/vue@3/dist/vue.global.js as the Vue docs suggest?

  2. The closing </script> tag that is part of the App.vue single-file-component (SFC) gets included in the source-map but is not escaped correctly, and actually breaks the page (the browser sees the tag inside a string but thinks it's the end of the script when it is not). Potentially encoding it as <\/script> might fix this?

SimonEast avatar May 26 '25 03:05 SimonEast