Goal
Be able to create a new project for react-native (using react-native init), and enabling flow checks on Visual Studio Code.
What I Did
I just created a new react-native project
react-native init iaptris
then opened Visual Studio code
cd iaptris
code .
I saw this errors
Whis these error descriptions (in italian, sorry)
Googling I concluded I must install Flow Extension for VsCode and I did.
I then disabled native checking for current workspace, setup file association and path to flow command
{
"javascript.validate.enable": false,
"files.associations": {
"*.json": "json",
"*.js": "javascriptreact"
},
"flow.pathToFlow": "C:\\Users\\mirko\\.vscode\\extensions\\flowtype.flow-for-vscode-1.0.1\\node_modules\\.bin\\flow.cmd"
}
Closed and restarted vscode on same workspace
The problem
At this point, errors disappeared, but also, removing a curly brace to throw a new syntax error, I do not see any errors. No errors.
Question
What else must I do now?
Actual solution, please post your answer if this is not the better method. And I think it's not the better method.
react-native init <project name>
open VsCode
disable Javascript -> Validate for the current workspace only (sorry if next image is in italian, but it's enough as reference)
install a plugin
yarn add eslint babel-eslint eslint-plugin-flowtype --dev
or
npm install eslint babel-eslint eslint-plugin-flowtype --save-dev
create a .eslintrc with following content
{
"parser": "babel-eslint",
"plugins": [
"flowtype"
],
"extends": [
"plugin:flowtype/recommended"
]
}
close and reopen vscode and the workspace
Related
I am currently working on a vue.js 2 project that uses vuetify pwa and vuex dependencies
When i try to build my project the cli throws the following error:
ValidationError: child "navigateFallbackWhitelist" fails because ["navigateFallbackWhitelist" at position 0 fails because [the value must be a RegExp]]
ValidationError: child "navigateFallbackWhitelist" fails because ["navigateFallbackWhitelist" at position 0 fails because [the value must be a RegExp]]
at Object.exports.process (C:\Users\BluRRayS\Documents\ProostWebApp\node_modules\#hapi\joi\lib\errors.js:202:19)
I already tried to reinstall all my NPM packages and to update them to their latest version.
I Also tried to pull my project freshly from github but that didn't work either.
Since I do not have much experience with webpack or front-end software engineering in general I really am a bit stuck so any help would be much appreciated.
What causes this error and how could I resolve it?
After a lot of fiddling around I found out that my vue.config.js wasn't valid after updating my npm packages.
module.exports = {
"pwa": {
// My Settings are in here
},
"workboxOptions": {
"navigateFallbackWhitelist": [
// Removed this empty object-> {}
]
}
},
"transpileDependencies": [
"vuetify"
],
}
I Had to remove the empty object from navigateFallbackWhitelist
Edit: This was a bug in 3.1.0 - upgrade to 3.1.1+ to get a working version of this feature.
create-react-app 3.1.0 is supposed to have support for customising the eslint warnings, as per: https://github.com/facebook/create-react-app/pull/7036
The documentation is here: https://facebook.github.io/create-react-app/docs/setting-up-your-editor#experimental-extending-the-eslint-config
I believe the rule setting I have in my package.json is correct because IDEA picks it up and no longer dislays the dot-location warning in the editor.
But npm start still complains with:
./src/Auth/AuthenticationProvider.tsx
Line 135: Expected dot to be on same line as property dot-location
My package.json is as per the documentation and I've added the EXTEND_ESLINT variable to the .env file.
My package.json config:
"eslintConfig": {
"extends": [
"react-app"
],
"rules": {
"dot-location": "off"
}
},
The environment variable is set in my .env file.
And the example failing source code looks like:
props.auth0Client.loginWithRedirect().
catch((e)=>{errorHandler(e)});
What am I doing wrong?
Am I misunderstanding how eslint config works, or maybe I'm wrong about what this new feature of create-react-app is actually supposed to do?
Please note: I don't want to add annotations to my code everywhere to disable the warning - the question is about customising the eslint config.
It appears you are not doing anything wrong and there is a bug in create-react-app 3.1.0. If you want to track progress, an issue has been filed in GitHub.
I have upgraded to my app to react-native 60.4 which support Autolinking all packages so that you dont have to manually go about setting things up and thus lowers the chances of error.
The problem is most of the packages have still not gotten compatible with this process and henceforth the app completely breaks.
my error is with https://github.com/corymsmith/react-native-fabric
referring to an issue on the repo for the same -> https://github.com/corymsmith/react-native-fabric/issues/225, which still remains unanswered.
I started giving it a try by forking the repo and understanding the auto link process given by react native.
In the package.json of the node_module package i replaced
"rnpm": {
"android": {
"packageInstance": "new FabricPackage()"
}
},
with file in the package root react-native.config.js
module.exports = {
dependencies: {
'react-native-fabric': {
platforms: {
android: {
"packageImportPath": "import com.smixx.fabric.FabricPackage;",
"packageInstance": "new FabricPackage()"
}
}
}
}
};
I also updated the build gradle to 3.4.1 from 3.1.0
My react native app is able to now find the package.
But when i call the package in my react component i get NoClassDefFoundError, which means that class is not found.
Anybody else gave this a try and have a solution please let me know.
Try to unlink with react-native unlink and then re run your code again.
Putting it here from the above comment to make it more clear:
Ok i got this to work by changing the forked repo -> (adding a react-native.config.js in the root of the package with with auto discovery and link configurations), but i think the only scalable solution i see right now is to degrade to RN ^59.0 as not a lot of packages have auto link config changes. So will wait for RN 60.4 to mature and then upgrade to it in about a month. In addition to this fabric is currently migrating to firebase and plans to complete by year end. This mean that anyways the sdk integration is going to be obsolete and hence this package too.
Also this issue is majorly related to react-native-fabric and not RN itself.
I used to build React apps starting with create-react-app, then I would install eslint with plugins and a custom config, run an eslint init, and add some custom scripts to run eslint and eslint auto fix easily and automatically on certain actions like a build. Create-react-app now comes with eslint already installed and "ready to go." In VS Code, I see the linter running in my "problems" tab. How do I now run eslint autofix? That is the main benefit of a linter in my opinion.
I use VS Code. I have spent some hours trying different ways to set up linters in create-react-app. I believe that the inclusion of eslint has changed the state of this quite a bit and made most of those posts simply outdated. I had a setup working for about a year using Prettier to avoid ejecting eslint, but an unresolved issue has caused that to stop working. So I have taken a step back to try to understand the state of the create-react-app dev environment now. Are folks using VS Code with create-react-app? If so, do you have autofix working?
I found one way to get an autofix on save in a create-react-app in VS Code. I don't know if it's the best one. It's simpler than I thought.
After running:
create-react-app my-app
Run:
npm install --save-dev prettier
Add to root directory:
.prettierrc
{
"tabWidth": 2,
"semi": false,
"singleQuote": true
}
Install VS Code prettier extension.
Find VS Code user settings json. Mine is:
{
"typescript.check.npmIsInstalled": false,
"window.zoomLevel": 0,
"editor.minimap.enabled": false,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
"javascript": "jsx"
},
"eslint.alwaysShowStatus": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"files.autoSave": "onFocusChange",
"prettier.semi": false,
"prettier.tabWidth": 4
}
Now, if I save, I will get autofixes.
Most of the tutorials online assume that eslint is not already installed with create-react-app and/or that eslint and prettier must be integrated with plugins and an eslintrc file. My fix may be missing something, as it may not be making use of eslint or there may be conflicts between the two linters at some stage.
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