I have no problem to access various process.* properties in my renderer/index.html, but I cannot even get them in the directly referenced index.js, not to mention App.vue... what is wrong here?
Also with a huge delay (in case, process depends on some onLoad()-ish things), all I get is undefined. I am using parcel as a bundler.
Now, that was easy. m)
console.warn( window.process.versions.node )
setTimeout(function(){
console.warn( window.process.versions.node )
}, 500);
Related
I have completed an app that builds on both Android and iOS. It works as expected when I build the app from the CLI or when I build it via XCode / Android Studio. However, on TestFlight, it gets errors that simply do NOT exist when I build it locally. These errors only appear on TestFlight, and thus I have little to no idea on how to go finding them down or even resolving them. Does anyone have better expertise in this area?
I'm not sure how common an issue this is-- I've never heard of it before to be honest, but the components that were not working were components that utilized ({props}) in a component. For example, any component wthat utilized the following declarations did NOT work
function Example({props}){
// stuff
}
// OR //
const Example = ({props}) => {
// stuff
}
all of the values inside of props were unreadable. I fixed this by simply moving EVERYTHING into a recoil state instead and that mitigated any errors. For example...
navigation.navigate("path",{prop1: value})
// AND //
return (<Example prop={value} prop={value})
would not work unless the prop was a single value-- a string, an int, a bool, these would work. Objects and Arrays did NOT properly carry over.
Hope this helps someone in the future.
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>
This question has been asked several times here(here the most relevant,Another example), but no solution has been proposed in any of them. So I have 2 questions to you guys:
Any idea why it wouldn't work in a large project? I mean, there are any know issues with fast refresh related to the size of the project or the packages he includes that will make fast refresh stop working? There is any way to fix it?
Is there a convenient way to edit an internal page in the app without using a fast refresh (without running the page independently, since it depends on all the logic of the app)?
This bug really makes the development really difficult for me, and I find it hard to believe that professional developers have not found a way around this problem, Please help!
I'm using expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)
TLDR;
using default export with no name ALWAYS resulted in a full reload of the app without hot reload!
Details
So after a lot of months of pain, I accidentally found a strangely enough effect:
I usually write my react components in this syntax:
export default ({ ...props }) => {
...
};
and for some reason, changing a module that exports that way ALWAYS resulted in a full reload of the app without hot reload!
after months of pain, accidentally i found out that changing the export to:
const Test = ({ ...props }) => {
...
};
export default Test;
completely fixed the issue and now hot reload works perfectly fine!
I did not saw this effect mentioned in a single place on the internet!
From react-refresh-webpack-plugin troubleshoot section
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names.
They are impossible to support because we have no ways to statically
determine they are React-related. This issue also exist for other
React developer tools, like the hooks ESLint plugin. Internal
components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
There is an other way to obtain this weird behavior.
When you export a simple function:
//if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};
from the entry file of your app (with typescript template expo init nameApp the file is App.tsx)
It will exactly produce a full reload of the app rather than a hot reload.
This is vicious because on ios simulator it full reloads the app without the modification whereas in android it full reloads the app WITH the modification. So you'll take some time to realize that this is not a hot reload in android but a full reload.
IDK why ios don't display the modification like android does..
But when you think at the problem, we shouldn't export multiple things from the entry point of an app. This sounds weird isn't it ?
TLDR;
During development, I had your problem with the infinity "Refreshing..." message. As well as incomprehensible errors like "unknow resolve module 2" and "bundle error..."
Details
the solution turned out to be unexpected, I changed "require()" to "import" in the main index.js file
before
const module = require('some-module')
after
import module from 'some-module';
I've implemented a react-native application and now I want to enhance it by adding along side it another different react-native application.
What i want to achieve is to keep the two application separated in order to continue to implement them as two separate application, and avoid to rewrite them completely as a single application.
Both application are using react-redux to handle their states. The first brutal approach which I have tried is to wrap one of the two application into a npm package and add it as a dependence of the other one. Then I've just added a tab to the main application which when clicked navigate to the second application. This approach seems to work, but I don't think is the best way to do it.
Do you think there could be any sort of problem doing so? Is there a more intelligent and elegant way to do it? I know it is kinda a generic question, so I would accept also an article/link about this argument.
You can create a git tag of your second application and can add it as a dependency in your first application.
You can also add it as a git sub-module.
P.S. i prefer the first one.
I think the best way to do it would be Linking as described here: Basic usage. So, you can easily pass needed parameters to the other app you want to open and also read them as app opens. Check this simple example:
Caller app:
Linking.openURL('calleeApp://app?param1=test¶m2=test2')
Callee app:
componentDidMount() {
Linking.getInitialURL().then((url) => {
if (url) {
console.log('Initial url is: ' + url);
}
}).catch(err => console.error('An error occurred', err));
}
do not forget to import it first:
import { Linking } from "react-native";
Let me know if it worked for you!
I'm building a React-Native app and whenever I run it on my Android emulator, I get this error:
Objects are not valid as a React child (found: object with keys
{$$typeof, type, key, ref, props, _owner, _store}). If you meant to
render a collection of children, use an array instead.
throwOnInvalidObjectType
D:\rn\manager\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6
Because this error means nothing to me, I decide to enable "Debug JS Remotely" in Chrome to see if I can get an error I understand. But with Debug Remotely enabled, the error goes away.
If I build the project and install the app on a real device, the errors come back.
But I feel like I'm stuck in a catch-22 because if I try to debug, I get no errors, and if I turn off debugging, I get errors.
Is there anyway to get around this?
Thanks!
The error mentions you use an object in your render() method where you shouldn't. Since you did not post any code, here is what you could do:
Keep removing elements from your render() method until you no longer get the error. Once it is gone, start placing code back until you hit the error again. The code causing the error will be or return an object, possibly a typo causing an object to be returned instead of a string for instance.
TL;DR: Stopped using firebase and used react-native-firebase instead
The problem for me wasn't the render method in any of my components or classes. I realized after trying the answer above, I basically removed all my files, and was left with one file. I changed the render method to display text inside one view, but I still got the error.
Then I started removing the modules I was importing inside that file one by one and found that it was the firebase module uninstalled firebase and installed react-native-firebase.