ref is not defined for production build

[mlhou]

works fine in development mode, but in production build with npm run build, it shows ‘ref is not defined’

<template>
  <div ref="divRef">test</div>
</template>

<script setup>
const divRef = ref(null);
</script>

<style scoped></style>

[Anthony Fu]

Can you share a minimal reproduction? Thanks.

[mlhou]

my-project.zip
please refer to attached files. Thanks.
It seems that the plugin auto imports unref for the Template Refs,
if I just use simple ref object, it can work both in development mode and production build

<template>
   <div>
    {{message}}
  </div>
</template>
<script setup>
const message = ref('hello')
</script>

however, if I ref to template element or component instance, it can work in development mode but it doesn't work for production build

<template>
  <div ref="divRef">test</div>
</template>

<script setup>
const divRef = ref(null);
</script>

[Matteo Rigoni]

We have the same problem. Using a template Ref gives an error in production. Did you have any time to take a look at it @antfu ?

[Rye.zsy]

Same problem, try vue-global-api , registor ref as global api and it works in production.

// main.js
import 'vue-global-api/ref'

[Martin Masevski]

Same problem, try vue-global-api , registor ref as global api and it works in production.

// main.js
import 'vue-global-api/ref'

For now this solved the problem. Thanks!

[94ashui]

Same problem

[sufuwang]

vue-global-api can resolve ref is not find ，but can't resolve Ref is not find

[Kaiser Qin]

my-project.zip please refer to attached files. Thanks. It seems that the plugin auto imports unref for the Template Refs, if I just use simple ref object, it can work both in development mode and production build

<template>
   <div>
    {{message}}
  </div>
</template>
<script setup>
const message = ref('hello')
</script>

however, if I ref to template element or component instance, it can work in development mode but it doesn't work for production build

<template>
  <div ref="divRef">test</div>
</template>

<script setup>
const divRef = ref(null);
</script>

<template>
  <main>{{ count }}</main>
</template>
<script setup lang="ts">
const count = ref([1, 3])
</script>

It's a simple ref usage, but also got the same error error TS2304: Cannot find name 'ref'.,
the version is "unplugin-auto-import": "^0.5.5". like this plugin vary much, but got this error, is depressed

[Rubin Bhandari]

got simiar issue in build

[Anthony Fu]

Please upgrade to the latest version and try again. If it still fails to you, please send a PR to add a failed tests under https://github.com/antfu/unplugin-auto-import/tree/main/test/fixtures. Thanks