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.
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 just starting out with Vue 3 and vite and everything is working well in development. However, when I build the app for production, the assets declared in the data property are ignored and throw a 404 in the production build. Here is what the data object looks like...
data() {
return {
testimonials: [
{
customer_name: "John Doe.",
comment: "Some customer comment here...",
image: "/src/assets/img/awesome_customer.png",
},
...
]
}
}
Referencing the asset as "/src/assets/img/awesome_customer.png" works in the template tag and production bundles it properly but not if it is used in the data property or in a method.
With the vue-cli we'd use the require() but I've not managed to get it to work in vite any ideas on how I can achieve this?
UPDATE:
I set up a sample repo here demonstrating what am referring to. The readme contains the steps to reproduce.
Upgrading to vite 2.0 and importing the images instead of referencing them directly in the data object solved the issue. Though am wondering if there is a better approach.
You can follow the discussion here
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.
I am having an issue related to react-native-asyncstorage from here:
https://facebook.github.io/react-native/docs/asyncstorage.html
When I run react-native run-ios, the following error appears:
I am using react-native 0.52.0 and this problem may be due to the dependency of react-native-asyncstorage:
react-native-asyncstorage#1.0.0 requires a peer of
react-native#^0.47.2 but none is installed. You must install peer
dependencies yourself.
The odd thing is it works fine for Android, but not for both iOS nor iOS emulator.
Can someone help?
EDIT
I would like to add some points that maybe useful:
I use Expo for development,
I have commented every AsyncStorage in my code, but the problem still persist,
As asked in the comment, here is the snipped code of my AsyncStorage code
-
import { AsyncStorage } from 'react-native';
export async function SetItem(strKey, objValue) {
try {
if (typeof(objValue) === 'string') {
await AsyncStorage.setItem(strKey, objValue);
}
else {
await AsyncStorage.setItem(strKey, JSON.stringify(objValue));
}
}
catch(error){
console.log(error);
}
}
Like said in the documentation: NOTE: This is not supported by all native implementations, you're probably running in an error because of this.
It may also be Reactotron you're using (according to the stack trace) that causes this. Try disabling it at first?
Are you having a custom implementation of AsyncStorage (like: https://www.npmjs.com/package/react-native-asyncstorage)? If so, take it off unless there's a specific reason to use it (please elaborate in the question)
But in general, you could for instance use React Native Simple Store and it's update method.
Or then you could write your own function with lodash.merge.
If problem persists even with commenting out all the AsyncStorage code, removing possible custom dependencies and taking off Reactotron, and you can't find a way to write multiMerge by yourself, update your question and ping me on this answer.
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!