typescriptvue.jsbuildvuejs3vite

Vite + Vue3 Error: Expected ">" but found "setup" when using lang="ts"


When running vite build, the build fails with error Expected ">" but found "setup". This error even occurs for the default HelloWorld.vue component (created in the sample Vite + Vue TS project) if it is used.

<!-- Badge.vue -->

<script setup lang="ts">
console.log("help me")
</script>

<template>
Irrelevant
</template>
// vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
            input: {
                ["main"]: "src/main.ts",

                // Add new pages here
                ["pages/Badge"]: "src/pages/Badge.vue",
            },
            output: {
                entryFileNames: "[name].mjs",
                chunkFileNames: "[name].mjs",
                assetFileNames: "assets/[name].[ext]",
            }
        }
    }
})

The error does not occur if:

I've tried reversing the <script> attribute order (i.e. <script lang="ts" setup>), but that just gives the same error but reversed (Expected ">" but found "lang")


Solution

  • I tracked down the problem to the vite.config.ts file. For anyone else having the same issue in the future, the solution was removing all .vue files from the build.rollupOptions.input field.