Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeError before using v-drag #17

Closed
fredriktid opened this issue Jun 23, 2020 · 14 comments
Closed

TypeError before using v-drag #17

fredriktid opened this issue Jun 23, 2020 · 14 comments
Labels
bug Something isn't working

Comments

@fredriktid
Copy link

After adding v-drag to an element we seem to be getting the following error before clicking the element. After clicking the error disappears.

Uncaught TypeError: Cannot read property 'style' of undefined
    at moveElementTransform.js:2
    at HTMLDocument.<anonymous> (dragEnd.js:16)

Out setup is fairly simple:

// app.js
import drag from 'v-drag/src/index';

[...]

Vue.use(drag);

// in a component

<div v-drag>Drag me!</div>
@nil nil added the bug Something isn't working label Jun 23, 2020
@nil
Copy link
Owner

nil commented Jun 23, 2020

Try importing v-drag from dist instead of src. Your code should be:

import drag from 'v-drag';
// OR
import drag from 'v-drag/dist/main';

@fredriktid
Copy link
Author

Tried that first, got an error, and switched to v-drag/src/index to identify where it came from. When changing back to import drag from 'v-drag' I get:

main.js:5 Uncaught TypeError: Cannot read property 'style' of undefined
    at s (main.js:5)
    at HTMLDocument.r (main.js:5)

Also the same with import drag from 'v-drag/dist/main';.

@nil
Copy link
Owner

nil commented Jun 23, 2020

Just to be clear, this error appears on page load but it disappears when you start dragging an element?

@fredriktid
Copy link
Author

That is correct.

@nil
Copy link
Owner

nil commented Jun 23, 2020

I'm not getting this error as moveElementTransform.js shouldn't be imported during the set up of the drag event. Check if you are using v-drag latest version (2.1.3).

If that's your version, can you please import v-drag from src and manually change the contents of v-drag/src/utils/moveElementTransform.js to be this:

export default function (transform, left, top) {
  if (window.data.move) {
    window.data.move.style.transform = transform;
    window.data.move.style.left = left;
    window.data.move.style.top = top;
  }
}

If this fixes it, I will push an update right now

@fredriktid
Copy link
Author

Yes, I'm using 2.1.3. You suggestion fixed the issue but I then got another one:

dragEnd.js:23 Uncaught TypeError: Cannot read property 'classList' of undefined
    at HTMLDocument.<anonymous> (dragEnd.js:23)
(anonymous) @ dragEnd.js:23

I'm using Vue to sprinkle some magic on a server-side rendered page if that matters.

@nil
Copy link
Owner

nil commented Jun 23, 2020

Do you mind sharing your full code?

@fredriktid
Copy link
Author

I can not share the entire code, but I can reproduce it with a bare bones setup:


// index.html

<html>
<body>
<div id="vue-app">
  <test-page />
 </div>
 // include vue here
</body>
</html>

// plugins/externalPlugins.js

import Vue from 'vue';
import drag from 'v-drag/src/index';
Vue.use(drag);


// app.js

import Vue from 'vue';
import store from './store/store';
import './plugins/externalPlugins.js';
import TestPage './pages/TestPage.js';

Vue.prototype.$bus = new Vue({});

const vm = new Vue({
  el: '#vue-app',
  store,
  components: {
    'test-page': TestPage
  },
});


global.vm = vm;

// pages/TestPage.js

<template>
    <div>
        <div v-drag>Drag me!</div>
    </div>
</template>

@nil
Copy link
Owner

nil commented Jun 23, 2020

I'm still not getting your error. Can you drag the element even if this error appears?

@fredriktid
Copy link
Author

Yes, I can drag it so everything works fine except for the error message.

@nil
Copy link
Owner

nil commented Jun 23, 2020

Okay, so in this case I'm gonna leave the issue open and i will look deeper into it sometime in the future. Thanks for reporting this issue :)

@fredriktid
Copy link
Author

Sounds good, thanks!

@rogeru
Copy link

rogeru commented Sep 8, 2020

I get the exact same error. And when adding the "if" statement I also get the "classList" error.
@fredriktid have you looked deeper into this?

@filonik filonik mentioned this issue Oct 9, 2020
Closed
@nil
Copy link
Owner

nil commented May 14, 2022

Closing this issue, as it was fixed with pull request #23

@nil nil closed this as completed May 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@fredriktid @rogeru @nil