Version

3.2.20

Reproduction link

gitee.com

Steps to reproduce

yarn yarn dev

code

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'
import coffee from 'rollup-plugin-coffee2'
import pug from 'rollup-plugin-pug'

export default defineConfig(
  ({ mode }) =>{
    const isDev = mode !== 'production';

    return {
      plugins: [
        coffee({
          bare:true,
          sourceMap: isDev
        }),
        pug(),
        vue()
      ]
    }
  }
)

<style lang="stylus" scoped>
h1
  color #0f0
img
  border 1px solid #0f0
  padding 16px
:deep(button)
  padding 16px
  font-size 16px
</style>

<template lang="pug">
main
  img(alt="Vue logo", src="./assets/logo.png")
  HelloWorld(msg="hi")
</template>

<script lang="coffee" setup>
import HelloWorld from "./vue/HelloWorld.vue"
</script>

What is expected?

work

What is actually happening?

Uncaught SyntaxError: The requested module '/src/app.vue?t=1635407270659&vue&type=script&setup=true&lang.coffee' does not provide an export named 'default'

Hi , I searched google and i think you should install the vue coffee plugin:

vue-cli add coffee

my reference is for vue-cli 3 but i guess it also works on vue3

I already add coffeescript loader

<script lang="coffee">
import HelloWorld from "./vue/HelloWorld.vue"
export default { 
  setup:=>
}
</script>

it works

but <script lang="coffee" setup> not work

This is by design. <script setup> can only work with plain JS or TS because we need to analyze the AST before the code is transformed by other plugins.

why not convert coffee to js first , then analyze the AST ？

Because the AST analysis works at source level, not generated-code level. This is required to analyze TS types.

I do not recommend using coffeescript with Vue 3 anyway, there's little benefit.