unplugin / unplugin-vue-markdown

Compile Markdown to Vue component
MIT License
508 stars 27 forks source link

script setup does not build when using TypeScript flavour #53

Open szabi opened 3 months ago

szabi commented 3 months ago

Describe the bug

In the *.md files to process, we can include <script setup> blocks. They are processed all right.

However, when switching to <script setup lang="ts">, npm run dev will still work, however, npm build will fail with an error resembling this:

error during build:
Error: [vite:esbuild] Transform failed with 1 error:
${path_to}/SomeText.md?vue&type=script&setup=true&lang.ts:1:15: ERROR: Exp
file: ${path_to}/SomeText.md?vue&type=script&setup=true&lang.ts:1:15

Expected ">" but found "class"
1  |  <template><div class="markdown-body"><p>import { defineComponent as _defineComponent } from ‘vue’
   |                 ^
2  |  import { unref as _unref, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as
3  |  <p>const _hoisted_1 = { class: “markdown-body” }

    at failureErrorWithLog (${project_path}\node_modules\esbuild\lib\main.js:1651:15)
    at ${project_path}\node_modules\esbuild\lib\main.js:849:29
    at responseCallbacks.<computed> (${project_path}\node_modules\esbuild\lib\main.js:704:9)
    at handleIncomingPacket (${project_path}\node_modules\esbuild\lib\main.js:764:9)
    at Socket.readFromStdout (${project_path}\node_modules\esbuild\lib\main.js:680:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
ERROR: "build-only" exited with 1.

Reproduction

Both with implicit and with explicit Javascript definition, the example works:

ImplicitJavaScriptExample.md:

<script setup>
</script>

# Header

Paragraph with some text

ExplicitJavaScriptExample.md:

<script setup lang="js">
</script>

# Header

Paragraph with some text

TypeScriptExample.md:

With TypeScript, it does not work:

<script setup lang="ts">
</script>

# Header

Paragraph with some text

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
    Memory: 6.93 GB / 31.69 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (125.0.2535.67)
    Internet Explorer: 11.0.19041.4355

Used Package Manager

npm

Validations

colinstevens06 commented 1 month ago

We are experiencing this, too. Same error WRT using lang='ts'

expected ">" but found "class"

jfitzsimmons2 commented 1 month ago

Does anyone know what files would be the culprit for this? I'm not super familiar with the repo but I would be interested in helping / creating a PR