0.5.0 refSugar take2

[jaxonly]

Thank you for bringing refSugar take2 support

I'm having some problems after upgrading to 0.5.0

1. Only after upgrading the version I get this error

   Uncaught ReferenceError: defineProps is not defined
   

2. After using refTransform: true and the $ref syntax, I get this error

   chrome console

   Uncaught ReferenceError: $ref is not defined
       at Object.../../node_modules/babel-loader/lib/index.js??clonedRuleSet-1[0].rules[0].use[0]!../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../node_modules/unplugin/dist/webpack/loaders/transform.cjs??ruleSet[1].rules[11].use[0]!./src/js/components/new.vue?vue&type=script&lang=js&
   

   terminal

    error  in ./src/js/components/new.vue?vue&type=script&lang=js&
   
   Module Error (from ../../node_modules/unplugin/dist/webpack/loaders/transform.cjs):
   This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' (1:0)
   

   source

   index.js

   import Vue from 'vue';
   import App from './App';
   
   import VueCompositionAPI from '@vue/composition-api'
   Vue.use(VueCompositionAPI)
   
   new Vue({
       el: '#app',
       render: (h) => h(App),
   });

   Vue SFC

   <template>
       <div @click="click">{{ message }} {{prop}}</div>
   </template>
   
   <script setup>
   // import { ref } from '@vue/composition-api';
   //
   // const props = defineProps({
   //     prop: {
   //         type: String,
   //         default: 'defaultProp'
   //     }
   // })
   
   let message = $ref('新的方式编写组件');
   
   const click = () => {
       console.log('新的方式编写组件事件')
   }
   </script>
   
   <style scoped>
   
   </style>

   Webpack Config

   // 使用 webpack-chain
   compiler.context.chain
           .plugin('Vue2ScriptSetup')
               .after('DefinePlugin')
               .use(Vue2ScriptSetupPlugin({
                   refTransform: true,
               }))
               .end();

[jaxonly]

It looks normal, I don't know which part is except the problem

import New from './components/new';
import Old from './components/old'; //
// let readersNumber = $ref(0);
//
// const add = () => {
//     readersNumber += 1;
// }

const __sfc_main = {};

__sfc_main.setup = (__props, __ctx) => {
    return {};
};

__sfc_main.components = Object.assign({
    New,
    Old
}, __sfc_main.components);
export default __sfc_main;

__sfc_main.props = {
    prop: {
        type: String,
        default: 'defaultProp'
    }
};

__sfc_main.setup = (__props, __ctx) => {
    const props = __props; //
    // let message = $ref('新的方式编写组件');
    //
    // const click = () => {
    //     console.log('新的方式编写组件事件')
    // }

    return {};
};

export default __sfc_main;

[antfu]

Can you share a minimal reproduction? Thanks.

[jaxonly]

Can you share a minimal reproduction? Thanks.

@antfu

Here is a recent reproducible example

https://github.com/JaxXu/sugartake2try

run script yarn build

You just need to change the version to 0.4.2, and it will compile properly

I have a comment in App.vue, in 0.5.2 , uncomment it and you can reproduce the second issue