Subscribe on changes!

Uncaught ReferenceError: defineModel is not defined

avatar
May 11th 2023

Vue version

3.3.1

Link to minimal reproduction

https://github.com/yanbowe/vue-demo

Steps to reproduce

升级到vue3.3.1后defineModel宏无法正常运行 image

What is expected?

可以正常运行

What is actually happening?

升级到vue3.3.1后使用defineModel宏报错

System Info

System:
    OS: macOS 12.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 32.01 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 16.0
  npmPackages:
    vue: ^3.3.1 => 3.3.1

Any additional comments?

No response

avatar
May 11th 2023
avatar
May 11th 2023

@yanbowe Did you opt in? vuejs/rfcs#503 @yanbowe 你选择加入了吗? vuejs/RFCS#503 yes image

avatar
May 11th 2023

defineModel也并不存在于vue的Options类型中 image

avatar
May 11th 2023

You didn't post your code, are you sure you're not importing it either? It's a compiler macro, you don't need to import it like defineProps, defineEmits, etc...

avatar
May 11th 2023

You didn't post your code, are you sure you're not importing it either? It's a compiler macro, you don't need to import it like defineProps, defineEmits, etc...

我提供的代码是最新的,而且defineModel默认是关闭的,需要配置显性开启吗 image

avatar
May 11th 2023

I got the same issue, and it looks like my vue plugin didn't resolve thedefineModel macro at all🫠 image

avatar
May 11th 2023

@yanbowe What I meant is that you didn't use something like import { defineModel } from 'vue' (and any other variation of that) since that's a common misconception, as defineModel are meant to be used just like with defineProps and all other macros.

I noticed just now you attached a repo, which I dind't before (my bad). I checked and you seem to have all in order, so I'm out of ideas (just by checking your GitHub repo alone!)

avatar
May 11th 2023

@yanbowe What I meant is that you didn't use something like import { defineModel } from 'vue' (and any other variation of that) since that's a common misconception, as defineModel are meant to be used just like with defineProps and all other macros.

I noticed just now you attached a repo, which I dind't before (my bad). I checked and you seem to have all in order, so I'm out of ideas (just by checking your GitHub repo alone!)

事实上一开始我就是按照正常的宏来使用的例如defineProps的用法,除了升级vue版本没有增加任何配置,但是defineModel宏是不工作的,所以我又按照rfcs中的说明去vite.config.js中去设置defineModel,得到的结果是一样的

avatar
May 11th 2023

Sorry, the opt-in config example in the RFC was wrong - it should be

// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        defineModel: true
      }
    })
  ]
}
avatar
May 12th 2023

@yyx990803 I still get eslint error for

'defineModel' is not defined. eslint[no-undef](https://eslint.org/docs/latest/rules/no-undef)

It works for defineProps and the other stuff

avatar
May 24th 2023

VSCode still throws an typescript error. vite.config.ts

  plugins: [
    vue({
      script: {
        defineModel: true
      }
    })
  ],

package.json

"@vitejs/plugin-vue": "^4.2.3",
"vue": "^3.3.4",

Both Volar and Volar (typescript) are on pre release versions

Screenshot 2023-05-24 at 15 21 11
avatar
Jun 12th 2023

I am also having the same issue with volar pre release