Vue-multiselect: ReferenceError: deepClone is not defined

[nikolaynesov]

Suddenly started to get this error when using vue-multiselect:

ReferenceError: deepClone is not defined
    at deepClone (eval at 167 (2.app.js:79), <anonymous>:8:20)
    at VueComponent.data (eval at 165 (2.app.js:65), <anonymous>:57:57)
    at VueComponent.mergedDataFn (eval at <anonymous> (app.js:146), <anonymous>:963:18)
    at VueComponent.mergedDataFn (eval at <anonymous> (app.js:146), <anonymous>:964:19)
    at initData (eval at <anonymous> (app.js:146), <anonymous>:3170:12)
    at initState (eval at <anonymous> (app.js:146), <anonymous>:3123:5)
    at VueComponent.Vue._init (eval at <anonymous> (app.js:146), <anonymous>:3376:5)
    at new VueComponent (eval at <anonymous> (app.js:146), <anonymous>:3498:12)
    at createComponentInstanceForVnode (eval at <anonymous> (app.js:146), <anonymous>:1728:10)
    at init (eval at <anonymous> (app.js:146), <anonymous>:1738:43)
logError @ vue.js?3de6:439

only in Chrome.

Did anyone face with it? Any ideas how to fix?

[shentao]

Pretty weird. How do you import the component? What’s your setup?

[nikolaynesov]

Yep, looks super strange. This is how I import the component:

import multiselect from 'vue-multiselect';

this is how I use it:

<multiselect v-model="value"
                     :options = "daysAll"
                     :multiple = "false"
                     label = "name"
                     select-label = ""
                     deselect-label = ""
                     selected-label = ""
                     placeholder="Day"
                     track-by = "val"
                     @input = "onInput">
        </multiselect>

I cleaned the browser cache, reinstalled npm dependencies, but still the same error.
I am using v2.0.0-beta.11 but it worked perfect before. Everything comes back to normal when I disable vue-multiselect. I see it only in Chrome on every page I have vue-multiselect. Do you know to what it relates to to point me to the right way?

[shentao]

Could you try this?
import Multiselect from 'vue-multiselect/lib/Multiselect'

Maybe there’s an error in the bundle. Also which version of Vue are you using?

[nikolaynesov]

When importing with:
import Multiselect from 'vue-multiselect/lib/Multiselect'
there is an error:
Can't resolve 'vue-multiselect/lib/Multiselect' in...

My vue.js version is 2.1.10.

[shentao]

Super weird. Please wait until tomorrow/Sunday for a new version. Hopefully it will be fixed.

[nikolaynesov]

Thank you. Trying to find the issue by my own forces meanwhile. Will let you know if I get it fixed.

[shentao]

You might try updating to beta.13 and also updating vue-loader.

[nikolaynesov]

Breaking changes is the issue... but yes will have to if there will be no other way. Still trying to find the problem.

[SirLamer]

Any reason why you aren't using beta-13? It works for me.

[nikolaynesov]

@SirLamer the reason is braking changes. A lot of code to edit. But I will have to do that for sure.

[nikolaynesov]

Ok, trying to update to beta-13, but there is another issue while running gulp.

{ [Error: ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/dashboard/work/jobs/list.vue
Module not found: Error: Can't resolve 'vue-multiselect' in '/home/vagrant/dev/project/resources/assets/js/components/dashboard/work/jobs'
resolve 'vue-multiselect' in '/home/vagrant/dev/project/resources/assets/js/components/dashboard/work/jobs'
  Parsed request is a module
....

I am not sure why it happens as it is not the issue with beta-11. It only happens with vue-multisilect beta-13. Trying to google the problem but with no results.
My package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-echo": "^1.0.1",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.6",
    "jquery": "^3.1.0",
    "es5-shim": "https://github.com/es-shims/es5-shim.git",
    "es6-shim": "https://github.com/es-shims/es6-shim.git",
    "es7-shim": "https://github.com/es-shims/es7-shim.git",
    "html5shiv": "^3.7.3",
    "bootstrap-sass": "^3.3.7",
    "csshake": "^1.5.1",
    "font-awesome": "^4.7.0",
    "moment": "^2.15",
    "pusher-js": "^3.2.1",
    "vue": "^2.1.0",
    "vue-multiselect": "v2.0.0-beta.13",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.0.1",
    "vuex": "^2.0.0",
    "vee-validate": "2.0.0-beta.14",
    "vue-datepicker": "^1.3.0",
    "vue-infinite-scroll": "^2.0.0",
  },
  "dependencies": {

  }
}

Current versions:
vue-loader: 11.1.0
babel-loader: 6.3.2
vue-template-compiler: 2.1.10
vue: 2.1.10

[shentao]

Have you tried doing rm -rf node_modules? That sometimes helps. Also please make sure you use import Multiselect from 'vue-multiselect'. There might be a problem when trying to select something from /lib.

[nikolaynesov]

@shentao thank you. I found the way to fix the installation issue. I think some time before I had some problems with vue-multiselect that were fixed by an alias in webpack config:

module.exports = {

    output: {
        publicPath: "/assets/js/"
    },
    resolve: {
        alias: {
            'vue-multiselect': 'vue-multiselect/lib/Multiselect.vue'
        }

    }

};

So I removed that alias and was able to install beta-13. But still no success to fix the original problem of the thread:

ReferenceError: deepClone is not defined
    at deepClone (eval at 167 (2.app.js:79), <anonymous>:8:20)
    at VueComponent.data (eval at 165 (2.app.js:65), <anonymous>:57:57)
    at VueComponent.mergedDataFn (eval at <anonymous> (app.js:146), <anonymous>:963:18)
    at VueComponent.mergedDataFn (eval at <anonymous> (app.js:146), <anonymous>:964:19)
    at initData (eval at <anonymous> (app.js:146), <anonymous>:3170:12)
    at initState (eval at <anonymous> (app.js:146), <anonymous>:3123:5)
    at VueComponent.Vue._init (eval at <anonymous> (app.js:146), <anonymous>:3376:5)
    at new VueComponent (eval at <anonymous> (app.js:146), <anonymous>:3498:12)
    at createComponentInstanceForVnode (eval at <anonymous> (app.js:146), <anonymous>:1728:10)
    at init (eval at <anonymous> (app.js:146), <anonymous>:1738:43)

it happens even after the installation of beta-13 and only in Chrome :(

The error happens in line:

var logError = function (err) { console.error(err); };

more details:

var nextTick = (function () {
  var callbacks = [];
  var pending = false;
  var timerFunc;

  function nextTickHandler () {
    pending = false;
    var copies = callbacks.slice(0);
    callbacks.length = 0;
    for (var i = 0; i < copies.length; i++) {
      copies[i]();
    }
  }

  // the nextTick behavior leverages the microtask queue, which can be accessed
  // via either native Promise.then or MutationObserver.
  // MutationObserver has wider support, however it is seriously bugged in
  // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
  // completely stops working after triggering a few times... so, if native
  // Promise is available, we will use it:
  /* istanbul ignore if */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve();
    var logError = function (err) { console.error(err); };
    timerFunc = function () {
      p.then(nextTickHandler).catch(logError);
      // in problematic UIWebViews, Promise.then doesn't completely break, but
      // it can get stuck in a weird state where callbacks are pushed into the
      // microtask queue but the queue isn't being flushed, until the browser
      // needs to do some other work, e.g. handle a timer. Therefore we can
      // "force" the microtask queue to be flushed by adding an empty timer.
      if (isIOS) { setTimeout(noop); }
    };
  } else if (typeof MutationObserver !== 'undefined' && (

[shentao]

This should be fixed today/tomorrow, in the beta.14 release.

[nikolaynesov]

@shentao that sounds great! do you know why does it happen? Is it because of the new vue.js version? Why only in Chrome? :O Is there any temporary fix before the beta.14 release?

[shentao]

I really have no idea, sorry :( Also, I use Chrome/Opera for development and I don’t get this message. It might be related to other libraries. Maybe vue-template-compiler? Vue itself or maybe even webpack. I guess you might try to make sure that you use the newest versions of everything.

[SirLamer]

For what it's worth, I work off of a forked branch of the project mostly because I want to build off of the .vue file and the vue-multiselect project team has decided to not distribute the source files with the project. So I fork it and edited .npmignore so that the /src folder is retrieved as well, then I include the Multiselect.vue. This compiles fine for me, also my javascript package ends up being a few kb smaller than otherwise when I include it in this way.

[shentao]

I guess I should add the /src files to the npm package then :) Also, most of the src files are available inside the /lib catalog.

[nikolaynesov]

@shentao hey, I managed to solve the issue with beta.13. Finally. Reinstalling all npm stuff and cleaning the cache helped. BTW, when are you going to push next release? There is an annoying bug: #187.

If I use 2.0 branch as it is now, are there any breaking changes since beta.13 or are you going to introduce them before the release?

[SirLamer]

I work off of a branch of this project and can tell you that https://github.com/monterail/vue-multiselect/issues/187 is fixed in the 2.0 dev branch. I actually prepared to submit a PR to fix this then found it had already been done!

[nikolaynesov]

@SirLamer cool, thank you. And there are no breaking changes in 2.0 dev branch since beta.13, right?

[SirLamer]

Yeah I encountered this error for which I submitted a PR:
https://github.com/monterail/vue-multiselect/pull/264

It is still in the 2.0 branch here as the PR has not been accepted, but my fork has this PR already adopted.

[shentao]

@nikolaynesov @SirLamer beta.14 released. Sorry you had to wait. Please read: https://github.com/monterail/vue-multiselect/blob/2.0/README.md
Breaking change regarding the styles.

[SirLamer]

I think perhaps the wrong version of the package might have been published to NPM, and also there is no release under v1.1.4 on here.

[nikolaynesov]

@shentao thank you, but unfortunately I can not find a new beta version on GitHub. The most recent one is still v2.0.0-beta.13. Same issue as @SirLamer mentioned.

[shentao]

Holy crap. Will be the first thing I will check in the morning! So sorry!
(A conference is not a good place to publish to npm :/)

[shentao]

Weird. Yesterday just before sleep I checked with unpkg if the new version is available and it wasn’t. But today morning it seems that everything is in place, so I guess it might have been a lag on npm’s side. :/

https://unpkg.com/[email protected]

[nikolaynesov]

@shentao so the only breaking update between beta.13 and beta.14 is including styles separately:

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

am I right?

is there any way to @import scss?

[shentao]

This and #274, can be considered breaking changes. The component uses just css so there are no scss files though there is nothing that should prevent you from importing the css into a scss file. It all depends on how your webpack setup looks like. Simple
@import vue-multiselect/dist/vue-multiselect.min inside the styles might work. :)

[nikolaynesov]

@shentao Tried to update to beta.14.
There is a new issue when settign v-model value to null.

[Vue warn]: Error in render function: 
(found in <VueMultiselect>)
TypeError: Cannot read property 'val' of null
...

<multiselect v-model="value"
                     :options = "hours"
                     :multiple = "false"
                     :placeholder="placeholder"
                     select-label = ""
                     deselect-label = ""
                     selected-label = ""
                     track-by = "val"
                     label = "time"
                     @input = "onInput">
        </multiselect>

so rolled back to beta.13 and it came back to normal.

[shentao]

I can’t reproduce the error. :/ Could you provide a fiddle with your code?
Also, what for do you use the onInput method? Could you show me it’s code?

[nikolaynesov]

@shentao I created a custom component "time-input", that uses vue-multiselect and that I import to another component (parent). When I reset value in the parent component (I have a reset method that sets value to null), the "time-input" component gets it from the property and updates the value in "time-input". onInput method just emits updates from "time-input" component to parent component.

onInput() { this.$emit('updated', this.value) }

parent -> time-input -> vue-multiselect

[SirLamer]

I don't think there is an attempt to read a property "val" anywhere inside vue-multiselect. Do you have an object property 'val' anywhere within your own component?

[nikolaynesov]

@SirLamer I think it happens because I have track-by = "val" in my code. First, I thought it is somewhere in my code, but after a review I found that I always check if the object value is not null before calling a val property on it. After I rolled back to beta.13 the error disappeared. I tried switching back and forward several times and having always the same result: beta.13 = ok. beta.14 = error. Will try doing the same once again tomorrow.

[shentao]

Weird. Yesterday I checked the case where you can init the component with null and also change an existing value to null. Everything works just fine. :/

[nikolaynesov]

@shentao I can init with null, but when I change it and set back to null there is an error. Will check again today later. Currently on version beta.13 everything works fine except 'removing spaces' bug.

[SirLamer]

Ohhhh okay, I think this is related to this PR: https://github.com/monterail/vue-multiselect/pull/264

[nikolaynesov]

@SirLamer what is the error you were getting in Chrome dev tools?

[Vue warn]: Error in render function: 
(found in <VueMultiselect>)
TypeError: Cannot read property 'THE_VALUE_NAME_FROM_TRACK_BY_PROP' of null
...

[nikolaynesov]

Ok, I checked PR#264 and based on the fixes changed my component to check the variable type and if it is null then set value to [] an empty array. This is a bit hacky but it's the only quick way. I really need to make a quick hotfix.
@SirLamer what do you think?

[SirLamer]

Yes that works because that's how the component is designed to nullify itself. I agree that it's hacky but it satisfies how vue-multiselect works. If my PR were adopted then providing "null" as input would work fine which is preferred.

This stems from one of the conditional checks on {whatever-the-selected-values-array-is-called}.length. It checks for a singular input and casts to an array but it does not do the same on a null input, so when the .length Array prototype method is called, it throws an exception.

[SirLamer]

Actually this only half fixes the problem, because if the user clears the input field then the component will emit "undefined" by default because it is looking for an element on an array which is empty. In my PR I changed it to return null if the array check returns a falsey result (such as 'undefined').

The PR changes are designed to minimize changes from the existing code, personally I would go about re-organizing how this stuff is tracked in the component but that's for another day, there are many PRs to consider and include, and doing a refactor beforehand would create a mess.

If you were to watch for an "undefined" output and then assign an empty array yourself, that would work.

[shentao]

Guys chill. I will fix that tomorrow and release it immediately. I can see there is a PR for that already.

[nikolaynesov]

@SirLamer yep, I see... :( so the only way for now I guess is to fork 2.0 and apply your commit from #264?
@shentao sure, thank you :) can you also push tags with new beta to origin please?

[SirLamer]

@nikolaynesov I haven't tested, but I think you can work around the current build if you:

1. When you intend a clear/empty selection set, set 'value' on the component to an empty array, both for signular and multiple selection case.
2. When the 'input' event provides a value of 'undefined', then set your local variable value to null or whatever you want to use to indicate an empty selection set.

[nikolaynesov]

@SirLamer I guess it can also be done by watcher for value parameter... but it means editing every single component that uses vue-multiselect ... Hopefully @shentao will release new subversion with #264 included today...

[SirLamer]

You can also fork it and affect a fix within your forked copy.

I was asked to make a change on my PR, I am traveling for work but will try to affect it tonight.

[nikolaynesov]

@SirLamer I made a fork and affected the fix. Is there any way to publish the dist folder the same way as it is done in beta.14?

[SirLamer]

Yeah there is an NPM compile command, I forget what it is, check package.json.

Personally I edited the .npmignore so that the /src directory is distributed, and I include the source .vue file. Compile takes longer the result is smaller.