'Class private methods are not enabled' in React - react-native

I am new to React and am trying to run a program from GitHub. I try to use npm start, but the compiler throw out a problem saying that "Class private methods are not enabled. Please add #babel/plugin-proposal-private-methods to your configuration.".
I tried to use npm install --save-dev #babel/plugin-proposal-private-methods. Also I created a .babelrc in the root directory of this project(I don't know wether this operation is correct since I know nothing about React). This is my .babelrc.
Also I have tried https://stackoverflow.com/questions/68686444/how-to-enable-private-method-syntax-proposal-in-react-app, but it seems not working.
I am confused and I appreciate it if anyone could help.

Related

react-native-config not working (Empty Config in both OS)

I'm really struggling with what seems like a very primitive error. I have installed react-native-config and when console.logging the Config object it returns {}.
The problem occurs both on android and iOS and it doesn't seem to be a linking issue because (even though RN 71.3 doesn't require manual linking) when following the steps to link manually on android I got an error saying RNCConfigPackage already linked.
This is a simplified version of my code:
import Config from 'react-native-config';
console.log(Config);
And this is what my .env file looks like:
REACT_APP_STAGE=development
TEST=ThisIsATest
ANOTHER_TEST=ThisIsAnotherTest
Debugging attempts
I have already tried:
Running gradlew clean and pod install (even though it's not a platform specific issue)
Run with ENVFILE=.env react-native run-android to hard code the env file
I understand that this is very limited information in order to debug the issue but any direction and help is appreciated including any approach you would follow to debug.
EDIT: The Config appeared in the end but is very late to update, an issue more people seem to be facing, I have used react-native-dotenv instead.

Vue Material postinstall failed

So I've been working on a Vue.js project for couple times now, and I am facing a problem I've never seen before.
Trying to git pull the project on another computer, or even downloading the project as a zip file, when it's time to npm install, vue-material module fails and the whole thing cannot be run.
It goes this way, with vie-material :
vue-material#1.0.0 postinstall C:\<my_things>\node_modules\vue-material
sh build/git-hooks/install.sh
Then I see this :
/usr/bin/bash: build/git-hooks/install.sh: No such file or directory
Then the modules' tree shows in the terminal, and at the end, I can see all the errors related to vue-material, with this statement :
Tell the author that this fails on your system:
sh build/git-hooks/install.sh
By the way, I tried to crate a brand new Vue project, and tried to add vue-material inside, no problem, so it has to do with my project.
Obviously though, /usr/bin/bash does not exist, since I'm running Windows 10.
Any knowledge on npm's installing routine ? I'm out of solution to try...
Can you share your package.json file?
I had this same problem just now and found that NPM could possibly be installing the incorrect version. Where I had "^vue-material": "1.0.0-beta-7" NPM was installing version 1.0.0 instead of 1.0.0-beta-7. If you remove the ^ then it may work for you. This is where I found the answer that helped me.
https://github.com/vuematerial/vue-material/issues/1155
Well, after couple times figuring out what was wrong, I got this :
I tried to use yarn and it told me that my node version was too old (vue-material needed 7.0+ and my node was 6.9, or at least that is what yarn told me), so I got myself the 8.9.3 node.
After this I tried to use yarn again, and the error with that bash script showed again.... then I just tried to use npm install again, and it worked just fine...
I don't know about the bash script thing, but one thing to remember is to always check for node and npm's version when errors happend.... (and yarn looks very cool and simple imo ^^).
You kinda made me think about a version problem though, I got you that ! :D
Problem solved....

How to install flow type correctly for react native#0.46+?

I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.
There was flow installation guide from react-native#0.22 document, but it's gone in react-native#0.46.
However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.
What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.
I just finished covering half of our project by flow and we use RN 0.44.0.
The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.
Anyway, I disable the error in node_modules, and here is my .flowconfig:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]
[libs]
./flowLibs.js
.....
[lints]
[options]
You should install flow first if you not setup correctly,
npm install --save-dev flow-bin
and also run this in you project root after install:
npm run flow init
If npm run flow init does not work, just add "flow": "flow" in npm scripts.
After init, put my .flowconfig in your project .flowconfig file.
Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found
Write down code in flowLibs.js:
declare module 'Module_Name' { declare var exports: any; };
After that, you should be good to go with you project now.
BTW, don't forget add //#flow on the top of the file which you want to check type.
I found flowtype is built in with react-native#0.46+.
For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes#flow, it won't work without flow-bin, they should mention that too.
To make flowtype of best use, I use it with Visual Studio Code.
Steps:
Install flow-bin globally, by npm i flow-bin -g.
Make sure your terminal is responsive to command flow.
Install vscode flow extension.
Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place.
To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.
then you have flowtype installed with visual result with every key stroke:
Try this one:
Adding Flow to React Native
https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809
Hope this helps!

SystemJS can't load aurelia-event-aggregator even though Aurelia has already loaded it

I'm simply trying to import 'aurelia-event-aggregator' into a TypeScript class and I get this error in my console. Even though it says it's loaded and configured aurelia-event-aggregator on lines 5 & 6, it says SystemJS still can't find it. This is especially strange since I'm also (successfully) importing autoinject from 'aurelia-dependency-injection' and customElement from 'aurelia-framework' without a problem, and they seem to be configured/installed identically to the event aggregator on my system via jspm.
My config.js and package.json are here.
I haven't the slightest idea how to start troubleshooting this. Please let me know if there's any other information I can provide.
This is going to sound dumb, but you need to run jspm install aurelia-event-aggregator. I know it's already in your project, but jspm 0.16 doesn't support peer dependencies (at least that's what I remember), so you have to explicitly install it as a top level dep for your app and then it will start working.

Upgrade to react-native 0.16 error

I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.
TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')
In Chrome Debugger:
Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined
Thanks
OBS: I'm running on Android.
I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.
In my case, I was able to narrow the cause down to one item in my .babelrc file:
{
"presets": ["es2015"]
}
As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.
Update 2:
It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.
Update:
I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:
{
"plugins": [
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
]
}
Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.
I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.
I solve the problem. I think it was because permissions in project folder. I ran chown in my folder to correct the permissions problems and now all are working.
Thanks
In my case the problem was a rogue .babelrc two folders up (my root code folder); I had initiated a yeoman generator to scaffold out a new project using babel-6...accidentally running yeoman from the root code folder. Apparently babel traversed upwards from my project folders until it hit this .babelrc which borked the react-native babel configs...
^ this was originally an edit to my initial answer, which was deleted WHILE I WAS UPDATING IT