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.
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
Vue initialized twice #342
Comments
Are you using the The 3.0.26 version should not contain the |
same here, also with 3.0.26 |
Is it a problem with the component? Does this error occur without using the component? |
i'm using https://github.com/RobertBoes/nova-slider-field for laravel/nova, it uses your component. |
This library uses components of the v2.x version. I don't know if it matters, I have not used Laravel Nova 😞 . |
sure, updated that to 3.0.26 |
Sorry, I have no other ideas 😭 . |
@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 |
Any help with this yet? |
@trapcodeio I can't reproduce this question, can you provide more information, such as the build environment ( |
I explained how i introduced the component in the main post. see the error in the image below. this happens once i require or import, even before setting vue to use it. i use laravel-mix with laravel so i don't have any of the files you mentioned above. |
@trapcodeio Wouldn't an error occur if |
The error occurs on import or require, even without adding For now i only add the slider when i want to build for production then comment them out in development. |
@trapcodeio Try executing If so, try deleting and reinstall dependencies. |
I used the project created by the Laravel document and did not report an error 😢 . related codeCreate-Project
./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 What is your development environment? |
@NightCatSama its development environment (Project also created by Laravel) |
@Stereotip42 What is the Laravel version? |
@NightCatSama 5.8 version, that's just recently updated from 5.7 |
@Stereotip42 Try using |
@IssueHunt has funded $50.00 to this issue.
|
First of all, thank you for an awesome component! Secondly, vue version is 2.6.10 From what I can find 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. Not sure if this helps at all, I'm just tired from debugging and thought I'd share. |
@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. |
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 This was leading to vue being included twice in the bundle, once in I was able to fix it by adding the flag |
@NightCatSama isn't something like this: configureWebpack: {
externals: {
vue: 'vue'
}
}, missing from |
@mareczek It seems that most of the errors are in the laravel environment, so there is no such |
@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. All you have to do in {
...
externals: {
vue: 'Vue'
},
...
} |
Same problem here: vue-slider-component: 3.0.33 (tried 3.0.26 and 2.x as well) I also have 2 instances of Vue being loaded. |
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:
Need to do some more testing to verify, but I thought I'd add this now for anyone using Rails and having the problem. |
Thank you @davidlbean! |
@davidlbean Not in Rails context, but same worked for me, thank you! |
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
package.json {
...
"electronWebpack": {
"whiteListedModules": [
"vue",
"vue-slider-component"
]
}
} Vue version: 2.6.10 Hope this helps someone! |
Hi Thanks |
this works for me, but i dunno why |
I got the error in a plain vue app (no vuetify, laravel or anything) when vue.js was added to 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.
|
I own you a coffee buddy. |
Its still working with version |
Using laravel mix, when using the command
it installs the component as a
It installs it as a If the project is installed a |
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 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. |
I closed this because there seem to be a fixed above |
Hello, it still not fixed. It is possible to remove dep on vue? |
@feldsam It has been tested that the slider does not work in versions prior to vue2.6.0 after removing So I updated it by releasing a beta version: yarn add vue-slider-component@beta
# npm install vue-slider-component@beta --save |
Hello, perfect! Working now without ugly errors. Thank you! |
I had this problem when upgrading from
|
Describe the bug
After including slider for use
I see the vue development message twice.
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.
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
The text was updated successfully, but these errors were encountered: