I'm developing a Vue component using Storybook and trying to add console.log() statements to my Vue code to help me debug the behavior of my component, but I'm not seeing the statements printed to the console. Instead, I'm seeing a lot of warnings saying [Vue warn] cannot run an inactive effect scope..
Related
On the app I am working on, I am getting this warning:
[Vue warn]: Duplicate keys detected: '-'. This may cause an update error
This is something I can't avoid since it is how our objects are structured.
So is there any way I can disable this warning on a specific Vue file?
I have seen silent Vue config (https://v2.vuejs.org/v2/api/#silent) but this disables all the warnings. And there is also the warnHandler (https://v2.vuejs.org/v2/api/#warnHandler) but this is only for the dev mode so the warnings will still be displayed when on prod mode. I want it also disabled on prod mode.
Anyone has any idea?
Thanks!
I'm trying to incorporate the Ripple package into my Nuxt application.
Following Nuxt docs and the package docs example I have a ripple.js file in plugins/ directory containing this:
import Vue from 'vue'
import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple)
Then in nuxt.config.js I have:
plugins: [
'~/plugins/ripple.js'
],
But now the app doesn't work at all, with some Unexpected token export error message on the screen, and a "Missing stack frames" error message in vm.js.
I have no idea what that means nor what I'm doing wrong, any suggestion?
This is due to an SSR error, where vue-ripple-directive cannot be used on the server. In order to get around this, you need to instruct Nuxt to only load the plugin on the client side.
To fix this, do the following 2 things:
First, rename ripple.js to ripple.client.js.
Second, update the plugins array to the following:
plugins: [
'~/plugins/ripple.client.js'
]
The .client postfix signals to nuxt to only run the plugin on the client.
More information can be found here
Always keep this method in mind when adding Vue plugins, especially when they interact with the DOM in some way. Most that I've come across require this method to function without errors, as the DOM is unavailable on the server.
When I try to test 2 components (with 2 different test files), just the first file will pass.
The second will fail with [Vue warn]: Error in directive validate bind hook: "TypeError: Cannot read property '$scopedSlots' of undefined".
I'm really failing to get this working. Has anyone seen/solved this problem?
Already placed issues at VeeValidate and vue-test-utils.
You can reproduce this behavior here: https://github.com/jourdanrodrigues/v-validate-issue
Just clone, install and npm run test:unit. You'll see the error.
you need to add sync: false to the mount/shallowMount options.
see https://vue-test-utils.vuejs.org/api/options.html#sync
When I run nuxt generate on my project it generates this error several times:
ERROR Cannot read property '__esModule' of undefined 11:09:43
at ensureCtor (node_modules/vue/dist/vue.runtime.common.js:2262:10)
at node_modules/vue/dist/vue.runtime.common.js:2317:26
at node_modules/vue/dist/vue.runtime.common.js:324:10
at process._tickCallback (internal/process/next_tick.js:68:7)
I would report it as a bug but I failed to reproduce it outside of my closed-source project. I'm also not sure if it's an issue with Vue or Nuxt, might even be both.
The error seems to be related to using async components which I do use. The line causing the error is in an async component resolver: https://github.com/vuejs/vue/blob/dev/src/core/vdom/helpers/resolve-async-component.js#L18
My project has other configurations too that don't use async components and are not having this issue.
What I would like to know is how it might be possible to avoid these errors and still use async components.
I set up a new vue-project that was created using vue ui and manually selecting the features.
The features are the following:
Babel
Router
Vuex
Use config files
and only that, and run the project using the development mode; however, an error occur in the console (Dev tools) showing an unknown elements for router-link and router-view.
https://github.com/JeromeDeLeon/vue-router-bug
That is the repo (a newly created one like hello world program). I already posted an issue on vue-router github page but eventually got closed because they said that everything was working properly, but it is not working for me.
I tried changing the Router to VueRouter on router.js, but the result is still the same.
I tried transferring the code of router.js to main.js, but still not working.
The expected result is to show the content of Home.vue in order to check if router is working.
The actual result shows the "Home | About" only in the top-middle of the browser and nothing else.