vue3 setup error render?

This issue has been tracked since 2021-09-10.

when i init component write setup function cause error?

image

gbrian wrote this answer on 2021-09-24

It looks not compatible with VUE 3

[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance.

Found same issues and workaorunds from other projects:
nhn/tui.editor#1226 (comment)

Sanan4li wrote this answer on 2021-10-05

facing the same error when using the basic component in Vue 3.2
image

R0ad-Runn3r wrote this answer on 2021-10-14

facing the same error when using the basic component in Vue 3.2 image

Hey,

I have the same problem / error-message like @Sanan4li

tomeraz wrote this answer on 2021-11-15

Same here, any update on this?

SHIXUNXUN wrote this answer on 2021-11-24

same question

qujinxing-s wrote this answer on 2021-12-08

image
use vue3 ,The same problem

Fine0830 wrote this answer on 2021-12-22

Please use "npm i -s [email protected]" for use in Vue3. #102 (comment)

qujinxing-s wrote this answer on 2021-12-22
calebwaldner wrote this answer on 2022-01-20

I'm getting an error in Vue 3 still. Using "vue-drag-resize": "^2.0.3"

I'm also using Nuxt 3, maybe that's part of the problem?

Error states:

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/calebwaldner/Code/galaxy-forms-web/node_modules/vue-drag-resize/dist/index.js:1:241)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:169:25)
    at async Loader.import (internal/modules/esm/loader.js:177:24)
    at async __instantiateModule__ (file:///Users/calebwaldner/Code/galaxy-forms-web/.nuxt/dist/server/server.mjs:21337:3)
[Vue Router warn]: uncaught error during route navigation:
Error: [vite dev] Error loading external "/Users/calebwaldner/Code/galaxy-forms-web/node_modules/vue-drag-resize/dist/index.js".
    at file:///Users/calebwaldner/Code/galaxy-forms-web/.nuxt/dist/server/server.mjs:20665:297
    at async __instantiateModule__ (file:///Users/calebwaldner/Code/galaxy-forms-web/.nuxt/dist/server/server.mjs:21337:3)
[vite dev] Error loading external "/Users/calebwaldner/Code/galaxy-forms-web/node_modules/vue-drag-resize/dist/index.js".
  at file://./.nuxt/dist/server/server.mjs:20665:297
  at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:21337:3)
(node:47332) UnhandledPromiseRejectionWarning: Error: [vite dev] Error loading external "/Users/calebwaldner/Code/galaxy-forms-web/node_modules/vue-drag-resize/dist/index.js".
    at file:///Users/calebwaldner/Code/galaxy-forms-web/.nuxt/dist/server/server.mjs:20665:297
    at async __instantiateModule__ (file:///Users/calebwaldner/Code/galaxy-forms-web/.nuxt/dist/server/server.mjs:21337:3)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:47332) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:47332) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[Vue Router warn]: uncaught error during route navigation:
TypeError: Cannot read property '__vccOpts' of undefined
    at /Users/calebwaldner/Code/galaxy-forms-web/node_modules/vue-router/dist/vue-router.cjs.js:2022:55
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
Cannot read property '__vccOpts' of undefined
  at ./node_modules/vue-router/dist/vue-router.cjs.js:2022:55
  at processTicksAndRejections (internal/process/task_queues.js:95:5)
(node:47332) UnhandledPromiseRejectionWarning: TypeError: Cannot read property '__vccOpts' of undefined
    at /Users/calebwaldner/Code/galaxy-forms-web/node_modules/vue-router/dist/vue-router.cjs.js:2022:55
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
(node:47332) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 7)

Thanks for any help resolving this.

qujinxing-s wrote this answer on 2022-01-20
ZXinL-CN wrote this answer on 2022-05-05

VUE 3:

npm i -s [email protected]

Introduce dependent components directly into the parent component.

// demo.vue
<script setup lang="ts">
    import VueDragResize from 'vue-drag-resize/src/component/vue-drag-resize.vue';
</script >

<template>
    <VueDragResize :w="200"  :h="120" >
        Hello World
    </VueDragResize>
</template>
qujinxing-s wrote this answer on 2022-05-05
More Details About Repo
Owner Name kirillmurashov
Repo Name vue-drag-resize
Full Name kirillmurashov/vue-drag-resize
Language JavaScript
Created Date 2018-04-26
Updated Date 2022-11-25
Star Count 1764
Watcher Count 24
Fork Count 291
Issue Count 89

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date