Vue-slider-component: Vue initialized twice

[trapcodeio]

Describe the bug

After including slider for use

 import  VueSlider from 'vue-slider-component'; 
 Vue.component('VueSlider', VueSlider);

I see the vue development message twice.

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

The first from my main needed.js where i initialized my vue.
The second is from webapp.js where i included the slider.

When i click on any element after adding this slider i get this error.

[Vue warn]: $attrs is readonly.

From this post on stackoverflow:
_The $attrs, $listeners and other warnings are displayed if there's more than one instance of Vue loaded_

Is there anything i can do to resolve this?

Vue: 2.6.10
Vue-router: 3.0.3
Vue-slider-component: 3.0.36

There is a $50.00 open bounty on this issue. Add more on Issuehunt.

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on Issuehunt to raise funds.

[NightCatSama]

Are you using the 3.0.26 version?

The 3.0.26 version should not contain the vue dependency.

[nilsE]

same here, also with 3.0.26

[NightCatSama]

Is it a problem with the component? Does this error occur without using the component?

[nilsE]

i'm using https://github.com/RobertBoes/nova-slider-field for laravel/nova, it uses your component.
branch 2.x works fine, but with 3.x the slider is not showing up at all and vue is loaded twice
without the component everything's fine.

[NightCatSama]

This library uses components of the v2.x version.

https://github.com/RobertBoes/nova-slider-field/blob/29a959b56f75c376ca55c97cef77818a9bb4548e/package.json#L19

I don't know if it matters, I have not used Laravel Nova 😞 .

[nilsE]

sure, updated that to 3.0.26

[NightCatSama]

Sorry, I have no other ideas 😭 .

[trapcodeio]

@NightCatSama yes am using version 3.0.26

It works fine in production but throws error in development

I still can't find a solution too

[trapcodeio]

Any help with this yet?

[NightCatSama]

@trapcodeio I can't reproduce this question, can you provide more information, such as the build environment (webpack.config.js or vue.config.js) and how you introduced vue and components.

[trapcodeio]

@trapcodeio I can't reproduce this question, can you provide more information, such as the build environment (webpack.config.js or vue.config.js) and how you introduced vue and components.

I explained how i introduced the component in the main post.
The error shows on development but not in production.

see the error in the image below.
needed.js is where i initialized my vue.
webapp.js is where vue-silder-component is included.

this happens once i require or import, even before setting vue to use it.
The second development message in webapp.js shows once i import or require vue-silder-component

i use laravel-mix with laravel so i don't have any of the files you mentioned above.

[NightCatSama]

@trapcodeio Wouldn't an error occur if v-model is not used on the component?

[trapcodeio]

@trapcodeio Wouldn't an error occur if v-model is not used on the component?

The error occurs on import or require, even without adding vue-slider in template.

For now i only add the slider when i want to build for production then comment them out in development.

[NightCatSama]

@trapcodeio Try executing npm ls vue in your project to see if there are two vue.

If so, try deleting and reinstall dependencies.

[shuhankuang]

I got the same error.
[email protected]
[email protected]
[email protected]

[NightCatSama]

I used the project created by the Laravel document and did not report an error 😢 .

related code

Create-Project

composer create-project --prefer-dist laravel/laravel blog

./resources/js/components/ExampleComponent.vue

<template>
    <div class="container">
        <vue-slider :width="400" />
    </div>
</template>

<script>
    import VueSlider from 'vue-slider-component'
    export default {
        components: {
            VueSlider,
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

<style>
    .container {
        padding: 30px;
    }
</style>

Before this problem can be solved, can try using v2.x.

I hope someone can solve this problem or provide a reproducible program.

[Stereotip42]

And I got the same error after update :(

[NightCatSama]

@Stereotip42 What is your development environment?

[Stereotip42]

@NightCatSama its development environment (Project also created by Laravel)

[NightCatSama]

@Stereotip42 What is the Laravel version?

[Stereotip42]

@NightCatSama 5.8 version, that's just recently updated from 5.7

[NightCatSama]

@Stereotip42 Try using vue-slider-component/dist/vue-slider-component.common.js

[IssueHuntBot]

@issuehunt has funded $50.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[getninjaN]

First of all, thank you for an awesome component!
I love it.

Secondly,
I have the same problem in development no matter if I use vue-slider-component.common or vue-slider-component.umd.

vue version is 2.6.10
vue-slider-component version is 3.0.36

From what I can find vue.runtime.esm.js is loaded from this line in vue-slider-component.umd.min.js.

module.exports = e(__webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.runtime.esm.js"))

I have tried a bunch of stuff but without success.

There are no errors in production however and the component still functions as it should in development, so it's not broken.
It's just annoying with the console getting wrecked by errors. :)

Not sure if this helps at all, I'm just tired from debugging and thought I'd share.

[NightCatSama]

@getninjaN Thank you for sharing.

This error should be caused by two copies of vue in app, but I don't know why this happened.

Can you provide me with a project that can restore the error, just need empty project.

[thiagorb]

I was having this same issue but it was due to how my bundle was being setup. In my case I need to have templates declared in .js files, so they must be compiled, and therefore the compiler must be included in the bundle.

In order to avoid importing vue/dist/vue in my components, I'm using aliasify to alias vue to either vue/dist/vue or vue/dist/vue.min (depending on whether I'm building for dev or production).

This was leading to vue being included twice in the bundle, once in node_modules/vue/dist/vue.js and once in node_modules/vue/dist/vue.runtime.common.js.

I was able to fix it by adding the flag global: true to the aliasify transform, so that the alias would also apply to vue-slider-component.

[mareczek]

@NightCatSama isn't something like this:

  configureWebpack: {
    externals: {
      vue: 'vue'
    }
  },

missing from vue.config.js?

[NightCatSama]

@mareczek It seems that most of the errors are in the laravel environment, so there is no such vue.config.js.

[cvharris]

@mareczek was correct. Once I indicated to Webpack that Vue was loaded somewhere else (in my situation in AEM's clientlibs) then it stops bundling Vue multiple times, which can happen for multi-instance pages or multiple bundled outputs in Webpack. vue-slider-component immediately started working for me

All you have to do in webpack.config.js is:

{
  ...
  externals: {
    vue: 'Vue'
  },
  ...
}

[arneysebaert]

Same problem here:

vue-slider-component: 3.0.33 (tried 3.0.26 and 2.x as well)
vue: 2.5.22

I also have 2 instances of Vue being loaded.

[davidlbean]

Specific to a Rails app:

Hmmm...I think I just got rid of my duplicate loading error... Added this to my config/webpack/environment.js file:

// see https://stackoverflow.com/questions/53582944/how-to-properly-install-vuetify-for-rails
const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
environment.config.merge(resolver)

Need to do some more testing to verify, but I thought I'd add this now for anyone using Rails and having the problem.

[getninjaN]

Thank you @davidlbean!
This solved the issue for me.

[michagee]

@davidlbean Not in Rails context, but same worked for me, thank you!

[Jakob-Maudience]

My project is an electron environment, and I'm using electron-webpack for bundling.

The above "resolve" webpack config didn't work, but I was able to resolve by whitelisting both the vue and vue-slider-component modules in my elecronWebpack settings in package.json

Since webpack is set to target the electron environment, all modules are treated as externals. Unfortunately, there can be a few situations where this behavior may not be expected by some modules. For the case of some Vue UI libraries that provide raw *.vue components, they will needed to be white-listed. This ensures that vue-loader is able to compile them as the UI library originally expected.

package.json

{
  ...
  "electronWebpack": {
    "whiteListedModules": [
      "vue",
      "vue-slider-component"
    ]
  }
}

Vue version: 2.6.10
vue-slider-component: 3.0.38
electron: 5.0.2
electron-webpack: 2.6.2

Hope this helps someone!

[CoffeeKing68]

Hi
I'm very new to webpack and compilation. If you wouldn't mind translating the solution for a laravel nova project (using laravel mix to compile).

Thanks

[fedeth]

Specific to a Rails app:

Hmmm...I think I just got rid of my duplicate loading error... Added this to my config/webpack/environment.js file:

// see https://stackoverflow.com/questions/53582944/how-to-properly-install-vuetify-for-rails
const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
environment.config.merge(resolver)

Need to do some more testing to verify, but I thought I'd add this now for anyone using Rails and having the problem.

this works for me, but i dunno why

[olemarius]

I got the error in a plain vue app (no vuetify, laravel or anything) when vue.js was added to <head>. Once I removed that and added import Vue from 'vue' in main.js it worked. Vue version 2.6.11 and vue-slider-component 3.1.5.

I'm thinking if you add import vue in the component, my app is resolving that in the build process so it ends up importing only once, while in my case I added vue outside the app file main.js so it couldn't possibly know there's another vue. Makes sense?

So if you set up a simple test like this and add vue-slider-component in app.js you should be able to reproduce the issue.

<html> <head> <title>Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div class="container"> <div id="app"></div> </div> <script src="app.js"></script> </body> </html>

[diegocharles]

Specific to a Rails app:

Hmmm...I think I just got rid of my duplicate loading error... Added this to my config/webpack/environment.js file:

// see https://stackoverflow.com/questions/53582944/how-to-properly-install-vuetify-for-rails
const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
environment.config.merge(resolver)

Need to do some more testing to verify, but I thought I'd add this now for anyone using Rails and having the problem.

I own you a coffee buddy.
I was having the same error here with my Rails app.

[borismacias]

Specific to a Rails app:

Hmmm...I think I just got rid of my duplicate loading error... Added this to my config/webpack/environment.js file:

// see https://stackoverflow.com/questions/53582944/how-to-properly-install-vuetify-for-rails
const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
environment.config.merge(resolver)

Need to do some more testing to verify, but I thought I'd add this now for anyone using Rails and having the problem.

Its still working with version 3.2.3, send me a link to buy you a beer 🍺

[james090500]

Using laravel mix, when using the command

npm install vue-slider-component --save 

it installs the component as a devDependencies and installs it to the local user node_modules (/home/james/node_modules) rather than the project directory. If I just use

npm install vue-slider-component

It installs it as a dependencies and into the project node_modules. (/home/james/project/node_nodues)

If the project is installed a dependencies rather than a devDependencies it seems to run fine. If it's installed as a devDependencies you get compilation errors. and "VueJS" not found

[feldsam]

Hello, I am using Laravel Nova and developing my own Nova Tool. I think that this problem is caused by this component's explicit dependency on the Vue (there is require('vue') in dist JS) in conjunction with how Nova manages third-party code.

Laravel Nova is shipped as the package with Vuejs installed, Nova extensions (tools, fields) have structure as composer package with own package.json and npm too. Problem is, that if I want to use this slider component, I have to install Vuejs in my Tool even it is installed in Laravel Nova. I can't compile Tool's resources without it.

The solution should be removing the explicit dependency on Vue from this package, so we can compile assets without installing second Vuejs in the Nova Tool/Field.

[trapcodeio]

I closed this because there seem to be a fixed above

[feldsam]

Hello, it still not fixed. It is possible to remove dep on vue?

[NightCatSama]

@feldsam It has been tested that the slider does not work in versions prior to vue2.6.0 after removing require('vue').

So I updated it by releasing a beta version:

  yarn add vue-slider-component@beta
  # npm install vue-slider-component@beta --save

[feldsam]

Hello, perfect! Working now without ugly errors. Thank you!