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
Related
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..
I am trying to use the environment variable in my component. But it works initially when i use the variable, but then it throws an error.
Component.vue
website: 'testing-hard-reality'
The code works absolutely fine when it is hardcoded, shown above. If the environment variable is used rather the hardcode i get an error
.env.local
VUE_APP_WEB_SITE: 'testing-hard-reality'
In the component the variable is used as:
website: process.env.VUE_APP_WEB_SITE
In my console i am getting the error as
[Vue warn]: Error in v-on handler: "Error: WebSite name is not set"
Please do tell me what to do.
Create in the same level of src folder a file
.env.development.local is used for working locally
.env.production.local is used for production
Add in the file your env variable
VUE_APP_MY_VARIABLE_NAME = my-value-here
VUE_APP_* part is important because all env variables in vue project needs to start with this prefix.
Now to get access on this value do:
process.env.VUE_APP_MY_VARIABLE_NAME
IMPORTANT STEP
Whenever you modify the .env files you have to stop your server and start it again in order to get the env changes.
I guess you are using vue-cli to build your vue project. In the vue-cli docs, I found the grammar of env.local would be
VUE_APP_WEB_SITE=testing-hard-reality
not your demo: VUE_APP_WEB_SITE: 'testing-hard-reality'
ref: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
i'm trying to create a remote vue cli preset on github, but for some reason i keep getting a syntax error.
My preset repo: https://github.com/christoph-schaeffer/vue-preset
The command i have entered: vue create --preset christoph-schaeffer/vue-preset testProject
The Error i get:
🚀 Invoking generators...
ERROR SyntaxError: Identifier 'router' has already been declared (15:7)
SyntaxError: Identifier 'router' has already been declared (15:7)
at Object._raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:762:17)
at Object.raiseWithData (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:755:17)
at Object.raise (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:749:17)
at ScopeHandler.checkRedeclarationInScope (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4826:12)
at ScopeHandler.declareName (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:4792:12)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:9367:22)
at Object.checkLVal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:865:15)
at Object.parseImportSpecifierLocal (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12706:10)
at Object.maybeParseDefaultImportSpecifier (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12751:12)
at Object.parseImport (/usr/local/lib/node_modules/#vue/cli/node_modules/#babel/parser/lib/index.js:12677:31)
At first it worked fine, then i've added several things in the preset.json along with a generator template.
After getting the error i've tried reverting the whole repo to the state it had when it was still working. However i still get that error...
I guess it's not really about the preset but instead an issue with my global babel package or something?
I'm using vue-cli version 4 and im working on a mac
Any directions on how i could get this running would be highly appreciated
I've found the issue.
First: the vue cli somehow seems to cache remote presets. That's the reason why it didn't work even after reverting changes.
The actual issue was, that the main.js shouldn't be changed like the other template files and needs special attention. For some weird reason it gives those random errors as soon as you have a main.js in your template.
If anyone is curious on how to modify your main.js in a preset check out :
https://cli.vuejs.org/dev-guide/plugin-dev.html#changing-main-file
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 am new in Vue.js and I want to use vue boilerplate from https://github.com/marcosmoura/vue-boilerplate.
When I try to run this using the command npm run dev it will generate a link, for example, http://localhost:8080.
When I visit this URL in a browser, this error occurs and I am not able to do anything:
Uncaught Error: [vuex] actions should be function but "actions.__esModule" is true
I got same problem and solved it by editing package.json to change the version of vuex to fixed 2.3.0. Maybe something went wrong in version 2.4.0.