I try to setup the source maps in a hope it will cause to show a real position of an error in Chrome developer tools.
I tried these options in vue.config.js:
configureWebpack: {
devtool: 'eval-source-map',
},
and
configureWebpack: {
devtool: 'source-map',
},
But I still get such error:
This is my package.json snippet
"scripts": {
"serve": "vue-cli-service serve",
...
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-pwa": "^3.12.1",
"#vue/cli-service": "^4.2.3",
How to fix it? How does an error look with correctly set up the source map?
Update: Minimum reproducible project: https://wwww.github.com/literakl/vue-errors
It happens for the errors in vue components.
The error should look something like this if the error occurs in the javascript part of the component:
Looks like you have the correct settings, my vue.config.js looks like this:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
I also use "#vue/cli-service": "^4.2.0"
Make sure that you have restarted the serve-script -- it won't work otherwise
I'm not sure if you are already using the VueJS devtool extension, but you should definitely use that in your overall workflow as well. Available for Chrome and Firefox.
The reason I'm advising to use this is simply that sometimes your code might be correct, but as it is written in your error example "Cannot read property 'poll' of undefined" it looks like the prop poll is not being filled correctly by the parent component, or whatever is pushing data to the PollHeading.vue file.
With the Vue devtools you can inspect data, props and computed properties of a single component, watch events as they unfold and visually follow data streams throughout your application.
Escpecially with complex transfers of data this can get a little out of hand and a good tool to visualize this is a real life saver.
That said, getting explicit line numbers of an error in Vue2 is kind of a hit or miss situation; with Vue 2.5 and onward you're able to place an errorHandler() hook inside your component that will give you a detailed stacktrace. Try placing one in the PollHeading.vue file and see what output it'll give you. Should be much more detailed than the default output you got.
Your error seems to be from the template part of the component.
Maps won't work on template errors as the template is converted to a big javascript function (render) and the connection between template and the render function is lost.
Your best is to set up an error handler and log it.
Related
Im following the tutorial here...
https://vue-tutorial.meteor.com/simple-todos/
But I get an error even just when installing the default vue meteor app.
meteor: {
$subscribe: {
'experiments': [],
},
experiments () {
return Experiments.find({}).fetch();
},
},
gives me an error
TypeError: Cannot read properties of undefined (reading 'find')"
If I console log Experiments, its there and I get the Meteor collection object. Any idea why this might be occuring??
import Experiments from '../../api/collections/Experiments'
console.log(Experiments)
Gives me
So its obviously an available object.
Just the find({}).fetch() method on it doesnt seem to be available??
UPDATE:
THE ANSWER BELOW WORKED (kind of)
experiments() {
let experimentsData = Experiments.find({}).fetch();
if (this.$subReady.experiments) {
console.log(experimentsData);
return experimentsData;
}
},
This now returns the experiments in the console log. So they are available. However rendering them to the template doesnt.
<h2>Experiments</h2>
<div v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
Any idea why??
Does it have to be put into a vue data object? Computed??
I thought the meteor:{} object acted kinda like computed, but it appears not??
How do I get the data onto the screen??
The answer is actually not correct.
I am experiencing the same issue from an out of the box meteor vue app created with: meteor create vanillaVueMeteor --vue
The error occurs if you define ANY function in the meteor: section of the default export (and bizarrely the first function defined is always being called regardless of whether it is actually referenced anywhere). This is obviously a bug either in the meteor vue creator or some combination of the default versions of meteor and vue libraries.
Additionally with respect to providing data to your template: you should not call fetch, just pass the result of the find which then means you won't need to wait for the subs to be ready because reactivity will update the view when the data is available. Obviously the underlying issue is preventing this all from working correctly.
UPDATE:
It seems to be an issue with 2.7.x Downgrading to the latest 2.6 worked for me:
meteor npm remove vue
meteor npm i vue#2.6 --save
It looks like you need to just use this.$subReady in your 'experiments` function to handle the timing of how the data comes in over DDP in Meteor.
I use something like this in all my subscriptions.
When the subscription starts up, the data won't be delivered from the publication the very 1st time, so that is what causes your undefined error that you are getting.
I love the Vue + Meteor combo. You can also come join the community Slack or Forum if you have questions, there are a bunch of us to help you there.
Happy Coding!
Bob
experiments () {
let experimentsData = Experiments.find({}).fetch();
if(this.$subReady.experiments){
return experimentsData;
}
},
This should resolve your issue in the UI. The HTML data will load and run before all the data from Meteor is ready, so you just use something like this:
<h2>Experiments</h2>
<div v-if="subReady.experiments" v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
I am adding a snippet from this codepen https://codepen.io/soulwire/pen/Ffvlo to display a particle animation. I'm adding it like this in my nuxt.config.js file:
plugins: [
{ src:'~/plugins/particles.js', mode:'client'}
],
It shows up and works but unfortunately the performance is so bad that the animation is not really perceivable as it should be. Is there anything I could do differently so that the performance is the same as on the codepen?
Also i am aware that this is now registered as a global plugin and always loaded. Is there a way to add it only to a specific site?
Thanks in advance!
in my React Native app, within my package.json I've set the name to rpms. This allows me to do:
import Component from 'rpms/App/common/Component'
Flow gets on well with this type of imports, however eslint-plugin-import raises import/no-extraneous-dependencies, and import/no-unresolved. I've added to my rules:
"import/no-unresolved": [2, { "ignore": ["rpms"] }],
And that way I disconnect import/no-unresolved. To disable the other I've tried with:
"settings": {
"import/ignore": ["rpms"]
},
However it's not working. However, I have the feeling, that maybe ignoring these errors is not the right way to go.
Published a package to solve this issue
https://www.npmjs.com/package/eslint-import-resolver-reactnative
Let me know how it goes.
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.
I'm using the tern_for_vim plugin for developing node applications. Currently various functions aren't displaying and I'm unsure why. For example: none of the html verb functions appear in the autocompletion list app.get (after assigning var app = express()) however app.listen does and I'm unsure why. I have searched around but can't find anywhere documenting usage of tern with express. Does anyone have a solution?
I have the following configuration file:
.tern-project:
{
"libs": [
"browser",
"jquery",
"express"
],
"plugins": {
"node" : {}
}
}
libs declaration is used for tern JSON type definitions. Today it doesn't exists express tern JSON type definitions, that's why you cannot use it inside your .tern-project
I have created and initialized tern-express project to support express with tern. Any contribution are welcome!