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
Related
I am using https://reactnative.dev/docs/environment-setup 0.64
I npm install #walletconnect/client
put below import in App.js
import WalletConnect from "#walletconnect/client";
after npx react-native run-ios and got below error:
error: Error: While trying to resolve module `crypto` from file `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/#pedrouid/iso-crypto/dist/cjs/helpers/env/node.js`, the package `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/index.js`. Indeed, none of these files exist:
I tried to remove node_modules folder and npm install again but still get the same error.
I am sure that it is thrown by #walletconnect/client because when I removed
import WalletConnect from "#walletconnect/client";
then the error gone
crypto is a built in Node module, which isn't available in React Native, as iOS/Android apps don't run with a Node runtime - only web apps do.
There are a few ways to solve this problem, all of them fairly hacky.
One way is to replace the crypto module with a React Native native module that does the same thing. React-native-crypto is the package used by create-react-native-dapp (https://www.npmjs.com/package/create-react-native-dapp) to integrate with WalletConnect: https://www.npmjs.com/package/react-native-crypto
To get this integration working, note that you'll need to be able to link modules and run rn-nodeify, as it mentions in the instructions on that npm package:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
If you're using Expo, note that you'll need to eject Expo before this can work.
Another hacky workaround is to run WalletConnect in a WebView using react-native-webview. There's an old but working example of this that you can just use to plug and play WalletConnect without requiring linking that you can get here: https://github.com/cawfree/react-native-walletconnect
Note that that repo is archived and effectively hardcoded to WalletConnect version 1.0.0, but it's a pretty simple codebase - you can just effectively copy and paste its code and update it to the latest version of WalletConnect to get it working with a later version if desired.
As a final note, there are multiple ways to get node modules running in React Native on top of rn-nodeify. If you'd like to explore other methods of getting node modules running, here's a quick rundown of other possibilities: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd
I created a package which uses react-native-webview as a dependency and I published it to npm.
My steps to create and publish a package are:
npm init
npm link react-native-webview
npm install react-native-webview
npm publish
Everything worked perfectly and I successfully published my package.
However, after the installation of my package using npm install <package_name> in another project, when I run the project I always get this error:
requireNativeComponent: "RNCWebView" was not found in the UIManager
I don't know why I am getting this. I also checked the dependencies in node_modules folder and all are present. But when I install react-native-webview dependency explicitly into my project It works perfectly fine.
This error is due to native link not present in between the UIManager and the JS core
You can either run react-native link react-native-webview or link it manually
use react-native link command to link dependencies
run
npx react-native link react-native-webview
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 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).
Every time I try to react-native link a new library, I get the same error message. Here it is for react-native-video.
rnpm-install info Linking react-native-video android dependency
rnpm-install ERR! Something went wrong while linking. Error: ENOENT: no such file or directory, open '/Users/Me/Projects/myProject/android/app/src/main/java/com/companyName/appName/MainApplication.java'
Please file an issue here: https://github.com/facebook/react-native/issues
The actual location of my MainApplication.java file is
./android/app/src/main/java/com/appName/MainApplication.java
The difference is that React Native Link is including "company name" in the path, which doesn't match my project.
How can I fix this?
I looked over some topic and found solution, you can try with:
npm install --save-dev babel-plugin-module-resolver
and then add your npm install package & react-native link again.
Good luck
I'm pretty late to the party on this, but for future reference;
TLDR: Adding another folder like so java/com/companyName/AppName/ will fix your issue.
After updating to the latest react-native I had this issue too. Your android path contains your apps ID so com.test.app path should be android/app/src/main/java/com/test/app.
Looking at your error message, its actually telling you where it's expecting the file to be;
Error: ENOENT: no such file or directory, open '/Users/Me/Projects/myProject/android/app/src/main/java/com/companyName/appName/MainApplication.java'
If you create another folder like so java/com/companyName/AppName/ you will be able to automatically link plugins.
Another way I tried and it works for me:
rm -rf node_modules && npm install
Then retry install your package:
ex:
npm install react-native-image-picker#latest --save
Then react-native link your package
react-native link react-native-image-picker
There are only two options that i am aware of to solve this problem
close all the terminals to stop the node server running on a difference terminal.
If you still have the mistake after that then try the following option
You might still have the error because you uninstall and re-install react-native without paying attention to the version that you installed which for most case will be the latest version. So double check the current version of your react-native when installing it. "\n"
so either
in your package.json you add "react-native": "^0.60.5" if the version is 0.60.5 replace "^0.60.5" by the version you are trying to run, in devDepencies and run npm install
or
run npm install react-native#0.60.5 or npm install react-native#version