\r\n \u003C/button>\r\n \u003C/label>\r\n\u003C/template>\r\n```\r\n\r\nBuild output:\r\n```js\r\nimport { defineComponent, ref, openBlock, createElementBlock, createTextVNode, toDisplayString, createElementVNode, mergeProps, renderSlot } from \"vue\";\r\nconst _sfc_main = /* @__PURE__ */ defineComponent({\r\n props: {\r\n label: {\r\n type: String,\r\n default: \"\"\r\n }\r\n },\r\n setup(__props) {\r\n const counter = ref(0);\r\n return (_ctx, _cache) => {\r\n return openBlock(), createElementBlock(\"label\", null, [\r\n createTextVNode(toDisplayString(__props.label) + \" \" + toDisplayString(counter.value) + \" \", 1),\r\n createElementVNode(\"button\", mergeProps(_ctx.$attrs, {\r\n onClick: _cache[0] || (_cache[0] = ($event) => counter.value++)\r\n }), [\r\n renderSlot(_ctx.$slots, \"default\")\r\n ], 16)\r\n ]);\r\n };\r\n }\r\n});\r\nexport { _sfc_main as BaseButton };\r\n```\r\n\r\nIn Vue 2 I run into `Uncaught TypeError: Object(...) is not a function` error with `defineComponent()`. I suppose it should be importing from \"vue-demi\" instead of \"vue\"?\r\n\r\nPackage.json\r\n```json\r\n\"dependencies\": {\r\n \"vue-demi\": \"^0.12.4\"\r\n },\r\n \"devDependencies\": {\r\n \"@types/node\": \"^17.0.21\",\r\n \"@vitejs/plugin-vue\": \"^2.2.0\",\r\n \"@vue/composition-api\": \"^1.4.9\",\r\n \"typescript\": \"^4.5.4\",\r\n \"vite\": \"^2.8.0\",\r\n \"vue\": \"^3.2.25\",\r\n \"vue-tsc\": \"^0.29.8\"\r\n },\r\n \"peerDependencies\": {\r\n \"@vue/composition-api\": \"^1.0.0-rc.1\",\r\n \"vue\": \"^2.0.0 || >=3.0.0\"\r\n },\r\n \"peerDependenciesMeta\": {\r\n \"@vue/composition-api\": {\r\n \"optional\": true\r\n }\r\n },\r\n```\r\n\r\nvite.config.ts\r\n```ts\r\nexport default defineConfig({\r\n plugins: [vue()],\r\n build: {\r\n lib: {\r\n entry: path.resolve(__dirname, \"src/lib.ts\"),\r\n name: \"myLib\",\r\n fileName: (format) => `lib.${format}.js`,\r\n },\r\n rollupOptions: {\r\n // make sure to externalize deps that shouldn't be bundled\r\n // into your library\r\n external: [\"vue\"],\r\n output: {\r\n // Provide global variables to use in the UMD build\r\n // for externalized deps\r\n globals: {\r\n vue: \"Vue\",\r\n },\r\n },\r\n },\r\n },\r\n optimizeDeps: {\r\n exclude: [\"vue-demi\"],\r\n },\r\n});\r\n```",[],145,"Not running on Vue 2 App","2022-09-04T15:48:05Z","https://github.com/vueuse/vue-demi/issues/145",0.658929,{"description":2929,"labels":2930,"number":2931,"owner":2853,"repository":2854,"state":2915,"title":2932,"updated_at":2933,"url":2934,"score":2935},"I have a project that uses my plugin `v-code-diff` and `@vueuse/core`, the project uses the yarn package manager. `v-code-diff` uses `vue-demi`: `latest` version. And the order of `v-code-diff` is after `@vueuse/core` in dependencies of `package.json`, like this.\r\n```json\r\n \"dependencies\": {\r\n \"@vueuse/core\": \"^8.9.3\",\r\n \"v-code-diff\": \"^0.3.11\",\r\n \"vue\": \"^2.7.7\"\r\n }\r\n```\r\n\r\nWhen yarn.lock does not exist, execute yarn to install dependencies, start the project, and the project can work normally.\r\n\u003Cimg width=\"688\" alt=\"image\" src=\"https://user-images.githubusercontent.com/33391300/181254812-a5577d49-0a12-4462-8868-cfc0797c10b3.png\">\r\n\r\nThen delete node_modules but not deleting yarn.lock. When reinstalling dependencies with yarn, the project cannot work normally\r\n\u003Cimg width=\"843\" alt=\"image\" src=\"https://user-images.githubusercontent.com/33391300/181254487-286271c4-6b43-486d-9639-f0d8f0f0c850.png\">\r\n\r\nI compared the node_modules and yarn.lock of the two versions before and after. yarn.lock is the same before and after, but node_modules has changed as shown below\r\n(node_modules2 can work, node_modules cannot work)\r\n\u003Cimg width=\"1490\" alt=\"image\" src=\"https://user-images.githubusercontent.com/33391300/181256290-1f1b0bc7-70cc-4aa1-9828-4b49d592b140.png\">\r\n\r\nI suspect it has something to do with the different versions of vue-demi in the two plugins. I uploaded the test package `shimada666-test`, the code is the same as v-code-diff, but the version of vue-demi is adjusted to `^0.13.6`, the problem seems to be solved.\r\n\r\nAlso, if the order of v-code-diff is adjusted before @vueuse/core , it seems to be fine.\r\n\r\nAlso, if I use pnpm package management, it seems to be fine.\r\n\r\nThe minimal reproducible repository: https://github.com/Shimada666/vue27_vuedemi\r\n\r\n----\r\n为了怕描述不清楚,我用中文重复一遍\r\n\r\n我有一个项目,使用了我的插件 v-code-diff 和 @vueuse/core,项目使用 yarn 包管理器。其中 v-code-diff 使用了 vue-demi: latest。且在 package.json 的 dependencies 中,v-code-diff 在 @vueuse/core 之后,像这样。\r\n```json\r\n \"dependencies\": {\r\n \"@vueuse/core\": \"^8.9.3\",\r\n \"v-code-diff\": \"^0.3.11\",\r\n \"vue\": \"^2.7.7\"\r\n }\r\n```\r\n当不存在 yarn.lock 时,执行 yarn 安装依赖,启动项目,项目是能够正常运行的。\r\n\u003Cimg width=\"688\" alt=\"image\" src=\"https://user-images.githubusercontent.com/33391300/181254812-a5577d49-0a12-4462-8868-cfc0797c10b3.png\">\r\n\r\n此时删除 node_modules 但不删除 yarn.lock,重新 yarn 安装依赖时,项目无法正常运行\r\n\u003Cimg width=\"843\" alt=\"image\" src=\"https://user-images.githubusercontent.com/33391300/181254487-286271c4-6b43-486d-9639-f0d8f0f0c850.png\">\r\n\r\n我对比了前后两个版本的 node_modules 和 yarn.lock。前后 yarn.lock 是相同的,但 node_modules 产生了变化\r\n(node_modules2 是正常的,node_modules 是有问题的)\r\n\r\n\u003Cimg width=\"1490\" alt=\"image\" src=\"https://user-images.githubusercontent.com/33391300/181256290-1f1b0bc7-70cc-4aa1-9828-4b49d592b140.png\">\r\n\r\n\r\n我怀疑和两个插件中 vue-demi 的版本不同有关。我搞了个测试包 shimada666-test,代码与 v-code-diff 相同,但 vue-demi 的版本调整为了 ^0.13.6,问题似乎得到了解决。\r\n\r\n另外,如果把 v-code-diff 放在 @vueuse/core 之前,似乎也没问题。\r\n\r\n此外,如果包管理用 pnpm,似乎也没问题。\r\n\r\n最小可复现的仓库:https://github.com/Shimada666/vue27_vuedemi\r\n\r\n",[],180,"vue-demi latest version bug with yarn","2022-12-26T14:25:33Z","https://github.com/vueuse/vue-demi/issues/180",0.6676829,["Reactive",2937],{},["Set"],["ShallowReactive",2940],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f-tTCXktBXsFcgjHAmAjFXlviYbT-IkL3sbAI1zA7mIo":-1},"/vueuse/vue-demi/139"]