I've created a project with CRNA and after some considerations I've decided to go with MobX for state management. MobX works best with the decorator syntax (most MobX documentation is written using the decorator syntax) so I wanted to install the Babel plugin enabling the use of decorators.
I've successfully installed MobX (yarn add mobx mobx-react), but after installing the Babel plugin to enable decorators (npm install --save-dev babel-plugin-transform-decorators and adding "transform-decorators" to the plugins section in .babelrc, yarn start stopped working throwing an error about react-native-scripts not being found.
I've then run yarn installand this time it threw an error saying
Error starting packager: TypeError: Invalid Version: undefined
at new SemVer (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:279:11)
at Function.major (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:551:10)
at D:\xdl\src\project\Doctor.js:634:18
at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4944:15
at baseForOwn (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:3001:24)
at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4913:18
at Function.forEach (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:9359:14)
at D:\xdl\src\project\Doctor.js:624:9
at Generator.throw (<anonymous>)
at step (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\xdl\build\project\Doctor.js:615:191)
error Command failed with exit code 1.
Does anyone have experience with CRNA and MobX? Any help is much appreciated!
I've solved it. Turns out that running npm install --save-dev babel-plugin-transform-decorators broke something. What I should have been running is yarn add --dev babel-plugin-transform-decorators-legacy and add "transform-decorators-legacy" to .babelrc plugins section. After doing those steps I ran yarn install and it fixed my project.
Additionally, my editor (VSCode) threw warnings about extensions being experimental so I added a jsconfig.json file to the root folder and added the following inside:
{
"compilerOptions": {
"experimentalDecorators": true
},
"exclude": [".expo/*", "node_modules/*"]
}
Related
I have recently integrated react-native-web into my native project and have included webpack. I've followed all the instructions listed here.
However, when trying to run using the webpack command listed on the bottom of that page, i keep getting the error:
ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react-native' from '<*path to root*>'
I have the preset metro-react-native-preset already installed and my babel config looks like the following:
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset']
};
Im currently using React Native 0.62
Could you try to install 'babel-preset-react-native'?
npm install --save -dev babel-preset-react-native
You said you've got metro-react-native-preset already installed but your config has metro-react-native-babel-preset - I assume that mismatch is just accidental?
Anyway, that's probably unrelated. Here's a few things to try:
Have you verified you've got 0.62 of react native installed? I.e. in the npm lock file, as maybe you're on an older version (pre 0.57) which uses that older plugin.
Have you got a .babelrc file too, perhaps, with the other plugin defined instead?
Similar to (1), have you tried to delete the lock file and/or node_modules folder and run npm install again from scratch so versions match up properly.
I've been trying to use ESLint along with Standard and I haven't been able to get it to work. I've tried setting it up through eslint --init, uninstalling eslint globally and having all the packages locally, installing each package manually npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node, reinstalling ESLint extension and nothing so far. I'm perfectly able to run ./node_modules/.bin/eslint --fix ... in order to fix/check errors but it doesn't work with the VSCode extension by any meanings. I don't have prettier so it isn't related to it either.
Output:
[Info - 12:33:20 AM] ESLint server is running.
[Info - 12:33:23 AM] ESLint library loaded from: c:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\node_modules\eslint\lib\api.js
[Error - 12:33:25 AM]
Failed to load plugin 'import' declared in 'graphql-prisma\.eslintrc » eslint-config-standard': Cannot find module 'eslint-plugin-import'
Require stack:
- C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\__placeholder__.js
Happened while validating C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\src\resolvers\index.js
This can happen for a couple of reasons:
- The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
- If ESLint is installed globally, then make sure 'eslint-plugin-import' is installed globally as well.
- If ESLint is installed locally, then 'eslint-plugin-import' isn't installed correctly.
.eslintrc:
{
"env": {
"es6": true,
"node": true
},
"extends": [
"standard"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
}
}
I've seen other questions in SO related to this issue but none of the solutions worked, unfortunately.
I had the same issue for many weeks and finally found this thread and comment on Github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372
My issue turned out to be related to subdirectories. As soon as I made the project the only open project with an .eslintrc.js file, all of my linting issues went away.
Hopefully this works for you.
To fix the dependency tree, try following these steps in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
Also, be sure, that you have latest version of "eslint-plugin-import" plugin, as in my case, for example i had this error with "2.20.1" version, but latest "2.25.3" solved this issue
I had the same error caused by the eslint-plugin-import dependency and in my case, I got rid of the error by increasing to the latest version of the package.
For those having the following error with flutter firebase cloud functions after running firebase init functions and trying to run firebase deploy --only functions:
ESLint: 8.9.0
Error: Failed to load plugin 'import' declared in '.eslintrc.js': Cannot find module 'es-abstract/2021/RequireObjectCoercible'
Require stack:
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\ExportMap.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\rules\named.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\index.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\#eslint\eslintrc\dist\eslintrc.cjs
This was solved by:
delete node_modules in functions folder
delete package-lock.json in functions folder
cd .\functions\ in the terminal to get into functions folder, run npm i, cd ../
firebase deploy --only functions
I am having this issue too which was why I checked this post but did not see any answer that work for me. After searching online, I stumbled into this code which solves my problem.
npm i -D eslint #typescript-eslint/eslint-plugin
In my case, i was not using jest at all.
So i had to downgrade de eslint dev dependency:
"eslint": "^7.32.0",
as it say here: https://github.com/eslint/eslint/issues/15149#issuecomment-939501275
I was compiling perfect way for adding eslint-flow-prettier in all types of react native projects.
I have some question about using eslint in Expo project.
Does exp init also install eslint?
If not, I have tried using following command for installing eslint
1)yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint
2)yarn eslint --init
Is this the correct way to put eslint in expo project?
In the second step above it asked to Select 'Use a popular style guide', I selected Airbnb, after that it removed multiple packages and project is not running(obvious reason for error: missing libraries).So why this is happening?Should I have selected config other than Airbnb?(only 3 options for eslint config: Google, Airbnb, Standard)
Also I did use YARN for expo project because NPM was giving more complication, as it was removing 500+ packages during step1 above, which resulted in many of the libraries going missing from project, I tried npm install to install all packages but still had problems. So went with YARN.
For now I want to somehow include eslint in the Expo project.
Thanks in advance.
UPDATE 26th March 16:25 IST:
1)Here is the info after installing eslint using: npm install --save-dev eslint-config-airbnb babel-eslint (npm version 5.8.0)
install eslint-config-airbnb and babel-eslint as dev dependencies.
create a file in your root named .eslintrc and add this inside this file
{
"extends": "airbnb",
"parser": "babel-eslint",
"rules": {
}
}
install Eslint extension in your editor. this is the extension for vscode(you can enable eslint if you are using Webstorm)
This problem got solved by deleting node_modules folder in project directory and did npm intsall.
So, during any npm install <package> if it removes some other previously installed packages, only way for now is to delete whole node_module folder and perform npm install. This worked for me, when this problem occurred while creating react-native app with native code support(https://facebook.github.io/react-native/docs/getting-started.html).
So I've started a new react-native project and copied over the .babelrc file from my previous project. I've installed the necessary plugins but I'm getting the error
Unknown plugin transform-decorators-legacy specified in .babelrc, attempted to resolve relative to "/mypath/project"
I've checked the node_modules in the path and see that the plugin was installed using yarn add. I'm also getting similar errors with my eslint plugins. Am I missing something in my project setup to have babel and eslint see the node_modules?
Is it perhaps caused by installing react-native-code-push? I think it had some errors when I installed codepush where it duplicated the react pod in the pod install - and so I removed it from the podfile. Is it trying to use a cached code-push js even though I don't have code push implemented in my react js files?
trasnform-decorators-legacy
You have a typo here.
try this :
yarn add babel-plugin-transform-decorators-legacy -g
for NPM :
npm install --save babel-plugin-transform-decorators-legacy
I'm working on implementing the twilio package into my react-native project and when I require it in my file the project wont load and I'm seeing the following error:
Unable to resolve module crypto from /Users/[myname]/Documents/Projects/React-Native/[app-name]/node_modules/twilio/lib/webhooks.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/crypto and its parent directories
I've tried installing the crypto package directly and that doesn't seem to work either.
Has anyone experienced this issue, and has a way to resolve it?
You can use the rn-nodeify module to get crypto on react-native.
Add rn-nodeify to your devDependencies in package.json:
"devDependencies": {
"rn-nodeify": "^6.0.1"
}
Add the following to the scripts section of the same file:
"scripts": {
…
"postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}
Be aware that rn-nodeify will modify your package.json.
More information available here: https://www.npmjs.com/package/rn-nodeify
I suggest you have a look there, plenty of solutions are given because none seem to fix for everyone.
I suggest you try the following (taken from the issue from the link) :
rm -rf node_modules
rm -fr $TMPDIR/react-*
watchman watch-del-all
npm cache clean && npm install
npm start from ./node_modules/react-native
But check out the issue in its integrality, many found other fixes that worked for them.
It seems that React Native doesn't accept certain packages based on their dependencies, Twilio being one of these.
While not a direct solution, I created a work around to this issue by creating a separate Express server to make the Twilio call, and calling that route from within my React Native app.
React Native packager uses Babel under the hood. This means that you can use babel-plugin-rewrite-require Babel plugin to rewrite all require('crypto') calls to require('crypto-browserify'), assuming that the latter is installed in your node_modules.
As of January 2016, you can use .babelrc file to define optional configuration, so this becomes really easy. First, install the dependencies:
npm install --save crypto-browserify
npm install --save-dev babel-plugin-rewrite-require
Then add plugins config to your .babelrc file:
{
"presets": ["react-native"],
"plugins": [
["babel-plugin-rewrite-require", {
aliases: {
crypto: 'crypto-browserify'
}
}]
]
}
Restart the packager and that should be it.
This is the same approach that ReactNativify uses, except that here we use .babelrc instead of defining custom transformer. When ReactNativify was written, it was not supported, so they had to go with more complex solution. See this file from ReactNativify for almost complete list of node polyfills.