Using local package in React Native project not working - react-native

I need to install my local package in my react-native project.
I install the package using npm i /path-to-folder command
But i get this error Unable to resolve module #babel/runtime/helpers/interopRequireDefault
local package package.json
{
...
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/runtime": "^7.19.4",
"react": "^18.1.0",
"react-native": "^0.70.1",
"react-native-svg": "^13.2.0"
}
}
project's metro-config.js
resolver: {
nodeModulesPaths: [packagePath],
},
watchFolders: [packagePath],

Related

Error: Failed to initialize react-native-reanimated library

Trying to create a drawer navigator in React Native using VSCode.
import { createDrawerNavigator } from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
When I get this error:
Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
Make sure you reset build cache after updating the config, run: yarn start --reset-cache, js engine: hermes
I made sure that everything in babel.config.js is correct:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
I added the following import to the top my root file (App.js):
import 'react-native-gesture-handler';
I reset my cache too using:
npm cache clean --force
Here are also all of my packages:
...
...
...
"dependencies": {
"#react-navigation/drawer": "^6.5.5",
"#react-navigation/native": "^6.1.1",
"#react-navigation/native-stack": "^6.9.6",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-gesture-handler": "^2.8.0",
"react-native-reanimated": "^2.13.0",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2"
},
...
...
...
Just ran into this issue, was fixed by running
npm start -- --reset-cache
Try installing preset by
npm i metro-react-native-babel-preset --save-dev
and then
npm start -- --reset-cache

Laravel's React Breeze ,Always can't run : npm run dev

The Vite doesn't work
Os:CentOs7
Laravel: 9.26.1
node: v16.17.0
npm: 8.15.0
I would like use new Laravel Project with React.js.
And try the plug-in Breeze for Authentication
I use the command
composer create-project laravel/laravel new-project
php artisan breeze:install
php artisan breeze:install react
npm install
npm run dev
At first all command successful complete , but when i use
npm run dev
the server told me
/tmp/dev-xxxxxx.sh: line 1: vite: command not found
and i try the solution
https://github.com/vitejs/vite/discussions/5432
and
https://github.com/vitejs/vite/issues/1215
that's all not work for me
this is package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"#headlessui/react": "^1.4.2",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-react": "^0.8.0",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.5.2",
"#vitejs/plugin-react": "^2.0.0",
"alpinejs": "^3.4.2",
"autoprefixer": "^10.4.2",
"axios": "^0.27",
"laravel-vite-plugin": "^0.5.0",
"lodash": "^4.17.19",
"postcss": "^8.4.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^3.1.0"
},
"dependencies": {
"vite": "^3.0.9"
}
}
How should I do to resolve this question?
I find the question
i type before npm install
npm config set bin-links false
because CentOs7 have sym link error(bin-link to my laptop)
that can not install complete
so i should set bin-links to true
and
npm install vite
it's would solve the problem

All my react-native projects shows error TypeError: cb.apply is not a function

I'm realtively new to react-native. All my projects were running fine in the morning, but somehow they stopped working. When I run react-native start and the react-native run-android, the app gets installed on the device but then this error props up which was not happening before.
Loading dependency graph, done.
DELTA [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)/home/yehyaumar/Documents/dumm/busybee/node_modules/graceful-fs/polyfills.js:285
if (cb) cb.apply(this, arguments)
^
TypeError: cb.apply is not a function
at /home/yehyaumar/Documents/dumm/busybee/node_modules/graceful-fs/polyfills.js:285:20
at FSReqCallback.oncomplete (fs.js:169:5)
I even cloned the repo from from scratch, but still the error persists. Please help out.
RN version: 0.59.2
My package.json file for one project,
{
"name": "projectalpha",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"#react-native-community/async-storage": "^1.11.0",
"axios": "^0.18.0",
"react": "16.8.3",
"react-native": "0.59.2",
"react-native-awesome-alerts": "^1.2.0",
"react-native-circle-checkbox": "^0.1.6",
"react-native-circular-progress": "^1.1.0",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-places-autocomplete": "^1.3.9",
"react-native-image-picker": "^0.28.1",
"react-native-maps": "react-native-community/react-native-maps#master",
"react-native-maps-directions": "^1.6.0",
"react-native-onesignal": "^3.2.12",
"react-native-reanimated": "^1.0.0-alpha.12",
"react-native-svg": "^9.4.0",
"react-native-svg-charts": "^5.2.0",
"react-native-swiper": "^1.5.14",
"react-native-tab-view": "^2.0.3",
"react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.6.0",
"unstated": "^2.1.1"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"#react-native-community/eslint-config": "^0.0.3",
"babel-jest": "^24.5.0",
"eslint": "^5.15.3",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
Ciao, this problem is connected to graceful-fs package. Plase, reinstall graceful-fs:
npm install graceful-fs --save-dev
And problem should be solved.
For me, npm cache clean —force was not working, and graceful-fs is not direct dependency in my project.
OS: Ubuntu
Node: 14.6.0
Npm: 6.14.7
I am still not sure why this error exits, but it works. I found this solution on Flavio Copes's post.
open file /node_modules/graceful-fs/polyfills.js, where the error comes from.
Here’s the function that gives the problem:
function statFix (orig) {
if (!orig) return orig
// Older versions of Node erroneously returned signed integers for
// uid + gid.
return function (target, cb) {
return orig.call(fs, target, function (er, stats) {
if (!stats) return cb.apply(this, arguments)
if (stats.uid < 0) stats.uid += 0x100000000
if (stats.gid < 0) stats.gid += 0x100000000
if (cb) cb.apply(this, arguments)
})
}
}
comment out these lines (line 62-64):
// fs.stat = statFix(fs.stat)
// fs.fstat = statFix(fs.fstat)
// fs.lstat = statFix(fs.lstat)
I've run into this problem while trying to start a react-native development server on one of my old projects - (React Native version 0.59.x). For me, the fix was downgrading the node version from 14 to 10 using nvm
Go to C:\Users(your username)\AppData\Roaming
Delete npm and npm-cache
Try running again if it gives the error again uninstall and delete Nodejs completely, check that those two files above are still nonexistent and then redownload Nodejs.
On one of my computers the first way worked no problems the second one needed to have Nodejs completely replaced and then worked.
here is the solution for it.
Option 1:
Follow this directory
C:\Users(your username)\AppData\Roaming
Delete the npm folder and if there is one mom cache folder.
Run npm clean cache —force ( — force is now required to clean cache)
You should be good now if not do option 2.
Option 2:
Follow this directory
C:\Users(your username)\AppData\Roaming
Delete the npm folder and if there is one mom cache folder.
Run npm clean cache —force ( — force is now required to clean cache)
Make sure everything to do with Nodejs is deleted and uninstalled.
Reinstall Nodejs.
You should be good now
I had to use node 12.3.1 and npm 6.9.0 to fix this error
nvm use 12.3.1
This installed both. npm install working again.

The package at "node_modules/web3-eth-accounts/src/index.js" attempted to import the Node standard library module "crypto"

I'm building a Ethereum ERC20 tokens support wallet in React Native, I have been struggling on this particular issue for the past few days and I hope someone could help.
The package at "node_modules/web3-eth-accounts/src/index.js" attempted
to import the Node standard library module "crypto"
Here is my package.json file.
"dependencies": {
"expo": "^33.0.0",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-web": "^0.11.4",
"socket.io-client": "^2.2.0",
"web3": "1.0.0-beta.34",
"cryptico": "^1.0.2",
"native-base": "2.8.0",
"node-libs-browser": "2.1.0",
"react-native-crypto": "^2.0.0",
"react-native-randombytes": "^2.0.0"
},
"devDependencies": {
"babel-preset-expo": "^5.1.1",
"babel-cli": "6.26.0",
"babel-preset-es2015": "6.24.1"
},
Please advise!
I have followed this link as well, no luck !
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766
i have 2 answers for you :)
1) use ethers.js since its rich and have default support for React Native
2) copy shims from link that you provided to your project and import it on App.js file at top so your web3 lib should work
you can use .babelrc file to define optional configuration, First, install the dependencies:
You can try install npm install --save crypto-browserify
Then add plugins config to your .babelrc file:
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
},
"plugins": [
["module-resolver", {
"root": ["./app"],
"alias": {
"crypto": "crypto-browserify"
}
}]
]
}
and Please import the wallet module.
import crypto from 'crypto'
You can run npm i --save-dev rn-nodeify#latest and rn-nodeify --install "stream"
if not ./node_modules/.bin/rn-nodeify --install "stream"
rn-nodeify will create a shim.js in the project root directory
example
// index.ios.js or index.android.js or App.js
// make sure you use `import` and not `require`!
import './shim.js'
Error

unable to resolve module `#expo/vector-icons`

Im not sure why I'm getting this error:
Unable to resolve module `#expo/vector-icons` from `...(directory path here)...` : Module does not exist in the module pack
I have tried the following things suggested on other forums/sites:
Clear watchman watches
Deleting the node_modules folder
Reset packager cache
package.json
{
"name": "app name",
"version": "0.0.0",
"description": "Hello Expo!",
"author": null,
"private": true,
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"babel-plugin-module-resolver": "^2.5.0",
"babel-preset-expo": "^4.0.0",
"expo": "^21.0.0",
"firebase": "^4.5.1",
"geofire": "^4.1.2",
"moment": "^2.19.1",
"react": "16.0.0-alpha.12",
"react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz",
"react-navigation": "^1.0.0-beta.13"
}
}
But still nothing, still getting this error
I resolved the issue by this command npm install #expo/vector-icons --save
I ran into the same issue. It's the babel-preset-expo. uninstall that and do the following
npm i metro-react-native-babel-preset --save-dev
delete the babel.config.json and create a new file called .babelrc
then specify the preset
{
"presets": ["module:metro-react-native-babel-preset"]
}
Sounds like vector-icons is another library you should be declaring in your package.json (https://www.npmjs.com/package/#expo/vector-icons)
Command npm install #expo/vector-icons --save do the trick !
The reason why I had this error, was because when I put useState in my app, VS Code auto imported it from react-native-vector-icons/node_modules/#types/react, instead of from "react"