Ref Sugar not working / Configuration confusion

[aphex]

Describe the bug

Unable to use $ref outside of a .vue file and also not sure what configuration is correct. Getting two errors:

$ref is not defined and Uncaught TypeError: Cannot read property 'call' of undefined

Cannot seem to find the right combination of configs here to use $ref in a vue file and a js file. I am not sure if I should be configuring vite or using the script block to configure the compiler, or maybe both? Can't seems to get anything to work without using the older refSugar config.

Reproduction

npm init @vitejs/app create basic vue app (not TS, didn't test)

update package.json dependencies

  "dependencies": {
    "vue": "^3.2.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.0",
    "@vue/compiler-sfc": "^3.2.8",
    "vite": "^2.5.3"
  }

npm i and npm run dev all should be good

Edit HelloWorld.vue remove {ref} import from top and change ref to

let count = $ref(0)

vite.config.js:

vue({
  script: {
    // refSugar: true,
    // refTransform: true,
  },
  refTransform: true,
}),

Uncaught TypeError: Cannot read property 'call' of undefined

vue({
  script: {
    // refSugar: true,
    refTransform: true,
  },
  //refTransform: true,
}),

HelloWorld.vue:6 Uncaught ReferenceError: $ref is not defined

vue({
  script: {
    refSugar: true,
    //refTransform: true,
  },
  //refTransform: true,
}),

**Works 🤷 **

Add /src/useTest.js with the following contents

export const thing = $ref('hi')

Add the following to HelloWorld.vue

import { thing } from '../useTest'

Add {{ test }} somewhere to the template in HelloWorld.vue

vue({
  script: {
    refSugar: true,
    //refTransform: true,
  },
  //refTransform: true,
}),

Uncaught ReferenceError: $ref is not defined

System Info

n/a

Used Package Manager

npm

Logs

No response

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/vue-next 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.

[aphex]

One issue I now realize is that I was trying to export a const using $ref, which is a no-no, this also lead me to realize that named exports are not being transformed anyway. I sent in a PR to fix this here

vuejs/core#4513

Looks like someone else has come across the dev build issues with refTransform though.
vuejs/core#4502

[aphex]

If anyone is coming across this and looking for an explanation or fix you can find it here. vuejs/core#4515

Closing from here as this is not a vite issue.