esbuild: Unterminated string literal with two different script tags

[theolavaux]

Describe the bug

I'm trying to build a component library and I use vue-tsc to generate the types for my component and vite to build my components into .umd.jsand .esm.js. I had an issue trying to generate types with vue-tsc with this component.

UiCTA.vue

<script setup lang="ts">
import { reactive } from 'vue';

interface Props {
  primary?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  primary: false,
});

const { primary } = reactive(props);
</script>

<template>
  <button class="btn" :class="{ primary }">
    <slot />
  </button>
</template>

<style scoped>
.btn {
  padding: 0.5rem 1rem;
}

.btn.primary {
  background: hsl(239, 100%, 27%);
  color: #fff;
}
</style>

I solved the issue by putting the Typescript declaration inside a script without the setup attribute as adviced here.

<script lang="ts">
interface Props {
  primary?: boolean;
}
</script>

<script setup lang="ts">
import { reactive } from 'vue';

const props = withDefaults(defineProps<Props>(), {
  primary: false,
});

However, I now get an issue with vite build as pasted below. It seems like there is a syntax error.

Reproduction

https://stackblitz.com/edit/vitejs-vite-kvjfs2?file=src/UiCTA.vue

System Info

System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 176.20 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 3.2.0 - /usr/local/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 98.1.35.101
    Chrome: 100.0.4896.127
    Firefox Developer Edition: 99.0
    Safari: 15.1
  npmPackages:
    @vitejs/plugin-vue: 2.3.1 => 2.3.1 
    vite: 2.9.5 => 2.9.5

Used Package Manager

yarn

Logs

❯ yarn build
vite v2.9.5 building for production...
✓ 1 modules transformed.
[vite:vue] Transform failed with 1 error:
/Users/theo/projects/ui-library/packages/components/UiCTA/src/UiCTA.vue:17:37: ERROR: Unterminated string literal
file: /Users/theo/projects/ui-library/packages/components/UiCTA/src/UiCTA.vue:17:37

Unterminated string literal
15 |    setup(__props: any) {
16 |  
17 |  const props = __props as { primarye';
   |                                       ^
18 |  
19 |  cons }

error during build:
Error: Transform failed with 1 error:
/Users/theo/projects/ui-library/packages/components/UiCTA/src/UiCTA.vue:17:37: ERROR: Unterminated string literal
    at failureErrorWithLog (/Users/theo/projects/ui-library/node_modules/esbuild/lib/main.js:1603:15)
    at /Users/theo/projects/ui-library/node_modules/esbuild/lib/main.js:1392:29
    at /Users/theo/projects/ui-library/node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (/Users/theo/projects/ui-library/node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (/Users/theo/projects/ui-library/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:526:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

It's a bug in upstream. vuejs/core#5830
PR vuejs/core#5831

vue sfc playground

[sapphi-red]

Closing as it's already been tracked in the upstream