Require vue-chat-scroll returns empty object

[wong2]

after install the latest version with npm:

> require('vue-chat-scroll')
{}

[theomessin]

I do not understand your issue. You need to instruct Vue to use the plugin:

var Vue = require('vue')
Vue.use(require('vue-chat-scroll'))

[wong2]

Hi, I mean this package doesn't expose anything.

[theomessin]

I don't see how that's a problem. The plugin works as it should. If you feel that something could be better, feel free to submit a pull request...

[wong2]

@theomessin the problem isrequire('vue-chat-scroll') returns an empty object {}!

[wong2]

I tried

var Vue = require('vue')
Vue.use(require('vue-chat-scroll'))

at first, but it doesn't work, Vue can't find directive chat-scroll when using v-chat-scroll

[theomessin]

Now that's interesting. Can you send your code (including a package.json) so I can replicate this locally?

[wong2]

@theomessin it's easy to reproduce: https://runkit.com/wong2/58cf4847d4d1e00013b3951a I'm using v1.1.0

[theomessin]

The following code runs fine for me:

var Vue = require("vue");
Vue.use(require("vue-chat-scroll"));

Where are you actually trying to use the plugin? What module bundler are you using?

[wong2]

@theomessin here is my code: https://github.com/wong2/kflow/blob/master/src/index.js#L3

but I don't think it's related with my code, because I can reproduce it with a node REPL:

➜  ~/codes/kflowgit:(master) ✗ node
> require('vue-chat-scroll')
{}
> 

[theomessin]

Sorry, I can't help you. It works just fine for me and for everyone else that has tried it. I don't know what you're doing differently. I'll keep the issue open in case someone else can help...

[wong2]

@theomessin what do you get if you run require('vue-chat-scroll') in node REPL?

[And-re]

I doesn't work for me as well. I'm using:

import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

and then

<ul id="chat-messages" v-chat-scroll>

and I'm getting [Vue warn]: Failed to resolve directive: chat-scroll error

[And-re]

I was able to make it work.

1. I created a file:

   
   const scrollToBottom = el => {
   el.scrollTop = el.scrollHeight
   }

export default { bind: (el, binding) => { let timeout let scrolled = false

el.addEventListener('scroll', () => {
  if (timeout) window.clearTimeout(timeout)
  timeout = window.setTimeout(function () {
    scrolled = el.scrollTop + el.clientHeight + 1 < el.scrollHeight
  }, 200)
});

(new MutationObserver(e => {
  const config = binding.value || {}
  const pause = config.always === false && scrolled
  if (pause || e[ e.length - 1 ].addedNodes.length != 1) return
  scrollToBottom(el)
})).observe(el, { childList: true })

}, inserted: scrollToBottom, }

2. I imported it and added a directive:
```js
import scrollBottom from './directives/scrollBottom'

Vue.directive('scroll-bottom', scrollBottom)

So it looks like the problem is here: https://github.com/theomessin/vue-chat-scroll/blob/master/src/vue-chat-scroll.js#L10-L14

[theomessin]

@And-re There's no point in doing that though... There's no actual problem if you use Vue correctly. Send me your package.json and your webpack.config.js file.

[And-re]

@theomessin https://gist.github.com/And-re/4b729ea7cb3d2793547b4ea84d68c0fe https://gist.github.com/And-re/c8980d7728f6f751af94c398b9e0b676

[theomessin]

You need to install it with NPM or YARN. Run: npm install --save vue-chat-scroll or yarn add vue-chat-scroll

[And-re]

@theomessin ? I had it installed and I was using everything as described in the README https://github.com/theomessin/vue-chat-scroll/issues/8#issuecomment-292789131

[theomessin]

Then why isn't it present in your package.json?

[And-re]

because I sent you the package.json file after removing "vue-chat-scroll" and using my own solution.

[sarahschuetz]

Running in the same problem right now.. Everything is set up but v-chat-scroll is not working.

[theomessin]

I appreciate that 4 or 5 of you are having this issue. Problem is, I can't replicate it... Either create a repo so I can replicate the issue locally or make a pull request solving it.

[sarahschuetz]

you can find our project here: https://github.com/sarahschuetz/IM531_ProjectT1

we are using vue together with nuxt so I tried implementing it as a Plugin like explained here https://nuxtjs.org/guide/plugins/#__nuxt

[ffigiel]

I'm experiencing this issue as well. I created a [pen] trying to reproduce my error, but it seems it works fine there 😅

[ffigiel]

This snippet will mute the error about missing directive, but it still doesn't work 😞

import Vue from 'vue'
window.Vue = Vue
require('vue-chat-scroll')
window.Vue = undefined

[theomessin]

I need a demo repo (just the basic files, not an entire project) to replicate the issue. I couldn't get @sarahschuetz's repo to work locally...

[kylestev]

I'm getting this as well. I'll see if I can get a reproducible repo up for you.

[kylestev]

Here's the issue: https://github.com/theomessin/vue-chat-scroll/blob/master/package.json#L30

It's a hard dependency on that specific version of Vue. I noticed it when committing the changes to the repro-repo.

[kylestev]

Here's a repo to reproduce it: https://github.com/kylestev/vue-chat-scroll-issue-8-reproducer/commit/95fb682fcb17b7a90dd92e297069919441dd6b15

[kylestev]

Submitted a pull request to fix this 😄 Thank you for this repository -- it should fit my needs exactly based on the demo.

[theomessin]

Can any of you confirm whether @kylestev pull request has fixed the issue? Version is 1.1.1

[sarahschuetz]

Not for me. I still have the same problem.

[sarahschuetz]

I am now using my own solution, so I don't need any help anymore. Nevertheless the problem still exists.

[mmieluch]

Yea, sorry man :( I'm using 1.1.1 and having this issue too :/

From my yarn.lock:

vue-chat-scroll@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.1.1.tgz#9d4278fc5d85d98dc3d43e140856c7659b4aaba3"

Doing

import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

does not register the directive, even though console is logging this:

console.log(VueChatScroll)
> Object {}
>   installed: true

Standard const VueChatScroll = require('vue-chat-scroll') logs out as an empty object.

[kennyki]

I had to revert to install from this commit to make it work:

git://github.com/theomessin/vue-chat-scroll.git#5adf120945a428e84c436c172664cd77d10e5416

Which is before this change (you can see that from the history)

[bbashy]

Getting the same issue. [Vue warn]: Failed to resolve directive: chat-scroll

EDIT: @kennyki that works for me too in package.json

"vue-chat-scroll": "git://github.com/theomessin/vue-chat-scroll.git#5adf120945a428e84c436c172664cd77d10e5416",

[ffigiel]

it must be an issue with the packaging, I literally copied the source code to my repo and it worked.

[bbashy]

@megapctr Which confirms the reply from kennyki since that change is for dist changes.

[phoet]

i can confirm that it's not working when used via webpack.

vue.runtime.esm.js?a427:554 [Vue warn]: Failed to resolve directive: chat-scroll 
(found in <Anonymous> - use the "name" option for better debugging messages.)

diff --git a/package.json b/package.json
index d602454..08c8fdb 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "lodash": "^4.17.4",
     "numeral": "^2.0.6",
     "vue": "^2.2.2",
+    "vue-chat-scroll": "^1.1.1",
     "vue-clickaway": "^2.1.0",
     "vue-range-slider": "^0.2.4",
     "vue-resource": "^1.3.1",
diff --git a/src/components/ChatTimeline.vue b/src/components/ChatTimeline.vue
index b70c715..22f64ec 100644
--- a/src/components/ChatTimeline.vue
+++ b/src/components/ChatTimeline.vue
@@ -7,7 +7,7 @@

       <transition-group enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
         <!-- TODO: entries brauchen ne ID (kein index mehr hier!) -->
-        <div v-for="(entry, index) in converstation.history" :key="index">
+        <div v-for="(entry, index) in converstation.history" :key="index" v-chat-scroll>
           <chat-section-bot  v-if="entry.type === 'bot'"  :messages="entry.messages" :typing="entry.typing" :bot="entry.bot" :redoAllowed="!!entry.redoStep" @redo-question="redoQuestion(entry.redoStep)" />
           <chat-section-user v-if="entry.type === 'user'" :messages="entry.messages" />
         </div>
diff --git a/src/main.js b/src/main.js
index d2f915d..4dd38bc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import VueResource from 'vue-resource';
 import VueSmoothScroll from 'vue-smoothscroll';
+import VueChatScroll from 'vue-chat-scroll';
 import Shaker from '@/components/Shaker';
 import NoScroll from '@/directives/no-scroll';
 import App from '@/App';
@@ -14,6 +15,7 @@ Vue.config.performance = true;

 Vue.use(VueResource);
 Vue.use(VueSmoothScroll);
+Vue.use(VueChatScroll);

 Vue.component('shaker', Shaker);
 Vue.directive('no-scroll', NoScroll);

[theomessin]

Hi Guys! I am absolutely stunned that so many of you actually need this plugin. I understand that there is an issue with the packaging. I'll see what I can do, but no promises. If you guys know the solution, just fork the repo and issue a pull request!

[phoet]

@theomessin i actually copied and adapted the code here, just wanted to let you know that there is an issue. it also helpful for others who come across this library, so that they don't waste their time trying to find out that it's not working in some setups.

[kennyki]

On top of my head, the easiest hack is to remove the line /src in .npmignore and we can happily import src/vue-chat-scroll.js :p For those who uses webpack should bundle the file themselves anyway, so it should not be a problem

[bbashy]

Any final fix for this?

[kennyki]

I created #13 as a quick and dirty fix for this issue. I suspect that the build tool laravel-mix is not configured properly to compile standalone release (not sure how to do it :-x) as in a plugin's dist file should not contain code related to webpack.

[theomessin]

13

[hjf]

I just installed this in my Vue project (with npm) and I'm getting the "[Vue warn]: Failed to resolve directive: chat-scroll" message.

I imported it like this: import cs from 'vue-chat-scroll' Vue.use(cs)

No errors when importing but it just doesn't work :(

[hjf]

As a workaround, I added this to my main.js:

const scrollToBottom = el => {
    el.scrollTop = el.scrollHeight
}

const vChatScroll = {
    bind: (el, binding) => {
        let timeout
        let scrolled = false

        el.addEventListener('scroll', e => {
            if (timeout) window.clearTimeout(timeout)
            timeout = window.setTimeout(function() {
                scrolled = el.scrollTop + el.clientHeight + 1 < el.scrollHeight
            }, 200)
        });

        (new MutationObserver(e => {
            let config = binding.value || {}
            let pause = config.always === false && scrolled
            if (pause || e[e.length - 1].addedNodes.length !== 1) return
            scrollToBottom(el)
        })).observe(el, {childList: true})
    },
    inserted: scrollToBottom
}

Vue.directive('chat-scroll', vChatScroll)

This isn't ideal but it works.

[kennyki]

@hjf have you look at #13? It should help

[theomessin]

@kennyki Just so you know, this workaround will brick UglifyJS. The reason I had to include the dist vue-chat-scroll.js was issue #6

I'll eventually try to fix this issue the proper way. Till then your workaround should do 😄

[kennyki]

Yup understand. It definitely need to be fixed properly. Thanks for the great plugin!

[wirrareka]

i stumbled upon similiar issue with my plugin, hence found this thread while trying to solve it, in my case i added output.libraryTarget: 'commonjs2' in webpack.conf in the plugin. Then i can use the plugin just fine with: import * as MyPlugin from 'my-plugin' Vue.use(MyPlugin)

might be worth a shot for you guys