Once i create and use own module then it will gives error like: Unable to resolve module - react-native

I am new in react-native and I have, for the first time, created my own module(npm).
I have tried to create my own module(npm) for common components and individually it works fine. However once I install, link it in our app, and try to use those components, it gives an error like this:
Unable to resolve module `<Module-name>` from `<file>`: Module `<Module-name>` does not exist in the Haste module map.
(Note: I have tested using Android Emulator only)
I have followed the below steps for module and test app creation
For Module
react-native init <module-name>
Add simple code of component in main index.js
And set pacakge.json like this:
{
"name": "<module-name>",
"version": "0.0.1",
"private": true,
"main": "index.js",
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"build": "echo 'build script executed'"
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4"
},
Now I check this component (react-native run-android), it will work fine.
Now I have tried to use in an app with the below steps
For Test App
Create new fresh app (react-native init <app-name>)
Install created npm with full path like;
npm install <full path of component>
Now I try react-native link <full path of component>, I have also tried simple react-native link, but nothing happens.
Now I run app using react-native run-android, however every time it gives the same error like;
Unable to resolve module <created-module name>
test app package.json
{
"name": "<app-name>",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.4",
"react-native-my-library": "^1.0.2",
"<created-module-name>": "file:../<created-module-name>"
},
"devDependencies": {
"#babel/core": "7.5.5",
"#babel/runtime": "7.5.5",
"#react-native-community/eslint-config": "0.0.3",
"babel-jest": "24.8.0",
"eslint": "6.1.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
Created module successfully installed but I think it is not linked properly and it will gives error.
So what is wrong here ?
Please give me suggestion / help.
Thanks.

I am assuming your module is successfully published in npm repository. Otherwise you can not use npm install <full path of component>.
If you are using
npm install <full path of component>
command for installing your module to a Test App from npm repo. Specify in your package.json like
"<created-module-name>": "file:../<created-module-name>"
is wrong. You need to remove that line from your package.json and try to install like;
npm install --save <full path of component>
This will automatically create a line in your package.json. You can now manually link your module.
For manual linking you can follow that guide.
Edited:
If you are using in your local computer,
Then no need to npm install.
Just copy your module into your project node_modules folder.
Then in you package.json add;
"dependencies": {
...
"your_module_name": "your_module_version"
...
}
Then, you just follow the manual linking process that I mentioned above.

Related

How do you deploy api made with express in create react app

I have a simple api created with express.js. When ever i try to push to Heroku it get stuck at this point?
remote: [4/4] Building fresh packages...
remote: Done in 16.30s.
remote:
remote: -----> Build
remote: Running build (yarn)
remote: yarn run v1.22.4
remote: $ node server.js
remote: Server started on port 9000
I also see the same thing in heroku dashboard "View build progress"
here is my package.json
{
"name": "firebase-server",
"version": "1.0.0",
"main": "index.js",
"repository": "##########",
"author": "#######",
"license": "MIT",
"scripts": {
"start": "nodemon --ext js,graphql --ignore data/ server.js",
"build": "node server.js"
},
"dependencies": {
"#firebase/app": "^0.6.7",
"#firebase/component": "^0.1.15",
"apollo-server-express": "^2.15.1",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-jwt": "^6.0.0",
"firebase": "^7.15.5",
"graphql": "^15.3.0",
"jsonwebtoken": "^8.5.1",
"notarealdb": "^0.2.2"
},
"devDependencies": {
"nodemon": "^2.0.4"
}
}
the only thing i have in this project is my server.js. what am i missing or not doing. Basically i trying to deploy this to have a live API for my project. it is working locally but now i would like to have it working live on heroku.
With Heroku, the build script is used if you need to customize your build options (e.g. if you're using WebPack or TypeScript). The issue is that you're using a script called build, which you're expecting to start the application. It's running that script, as it promises to do, but since it's starting the application, it'll "hang forever" from your point of view.
If you change your scripts to this, I think this will solve your issues. Locally, you would use npm local for nodemon, and npm start would start the app on Heroku.
{
"scripts": {
"local": "nodemon --ext js,graphql --ignore data/ server.js",
"start": "node server.js"
},
}

Unrecognized command 'run-eject'

I want to eject my react-native so I can install mobx but running both 'yarn run eject' and 'npm run eject' doesn't work.i think this is new issue and so couldn't find help online. any help would be appreciated.
this is my package.json file and the error given below.
{
"name": "a2x",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^22.4.4",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest",
"eject": "react-native run-eject"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"axios": "^0.18.0",
"mobx": "^5.5.0",
"mobx-react": "^5.2.8",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-native-elements": "^0.19.1",
"react-navigation": "^2.0.1"
}
}
Try npm run eject..not npm run-eject
But if you trying to add native dependencies later i think better to start project using react native init. not using create-react-native-app.
Actual command is react-native eject.
It will create new folder for android and iOS to run it seperately on native.
As you said you are getting error of Both the iOS and Android folders already exist!, so please delete it and try with this command.
If you already have android and ios folder with some native implementation, there is no need to use eject command at all.
regarding npm run reject command, I guess this will be more useful to clear everything.
Always working for me, only follow two steps
first install in your project
yarn add react-native-eject
and then run
react-native eject
make sure you have install yarn in your pc

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"

npm can't find dependencies for some react-native modules

I'm creating a react native app using create-react-native-app
npm create-react-native-app
I updated react-native version to 0.44.0, which requires to update react version to 16.0.0-alpha.6
This is my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "0.0.29",
"jest-expo": "^0.4.0",
"react-test-renderer": "~15.5.4"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/ex-navigation": "^2.11.1",
"babel-preset-react-native-stage-0": "^1.0.1",
"expo": "^16.0.0",
"react": "~16.0.0-alpha.6",
"react-native": "0.44.0"
}
}
Running npm install gives me following errors
C:\dev\repo\test>npm install
npm WARN lottie-react-native#1.1.1 requires a peer of react#>=15.3.1 but none was installed.
npm WARN react-native-maps#0.12.2 requires a peer of react#>=15.4.0 but none was installed.
npm WARN react-native-svg#4.4.1 requires a peer of react#>=15.4.0 but none was installed.
npm WARN react-static-container#1.0.1 requires a peer of react#^0.13.0 || ^0.14.0 || ^15.0.0 but none was installed.
It looks like react version 16.0.0-alpha.6 is not recognized by lottie-react-native, react-native-maps, react-native-svg, and react-static-container. I'm not sure if major version (15) must be met, or the alpha version 16 is not picked up by those libraries, or something else. Does anyone know how to fix this? Thanks.
I have a similar problem, actually right now I get this problem, whenever I try to create a new application with create-react-native-app.
The only solution (hack) I have found right now is:
Delete node_modules (for me it's not enough to just do npm install)
Do npm install
I just solve the same issue by removing the react-native folder in node_modules and reinstall the react-native by run this command
Delete the react-native folder in node_modules
Reinstall react-native by run npm install react-native
I think is more simply than deleting the entire node_modules as only the react-native packages and its package.json is missing.

some node_modules work, some don't

In my index.ios.js I put:
var moment = require('moment')
near the top and it works fine but
var formatTime = require('minutes-seconds-milliseconds')
right below it will not. both packages were installed the same way with
npm install --save <moment/minutes-seconds-milliseconds>
here is my package.json:
{
"name": "stopwatch",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"minutes-seconds-milliseconds": "^1.0.3",
"moment": "^2.14.1",
"react": "15.2.0",
"react-native": "0.29.0"
}
}
npm -V returns npm#3.10.3 /usr/local/lib/node_modules/npm
I'm using OS X 10.11.5
could this be at all related to https://github.com/facebook/react-native/issues/4968?
I've tried deleting node_modules and npm install'ing again but that hasn't worked. I've also tried react-native init'ing a new project and that also hasn't worked.
please do once like this:
import {moment} from 'moment';
import {formatTime} from 'minutes-seconds-milliseconds';