Unable to import Expo from 'expo'. in react native - react-native

I tried to import Expo from 'expo'. But I am getting an error as:
error: bundling failed: Error: Unable to resolve module `expo` from `C:\Users\reactnative\navigate\App.js`: Module `expo` does not exist in the Haste module map.
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (C:\Users\reactnative\navigate\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:183:15)
at ResolutionRequest.resolveDependency (C:\Users\reactnative\navigate\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (C:\Users\reactnative\navigate\node_modules\metro\src\node-haste\DependencyGraph.js:273:16)
at Object.resolve (C:\Users\reactnative\navigate\node_modules\metro\src\lib\transformHelpers.js:261:42)
at dependencies.map.result (C:\Users\reactnative\navigate\node_modules\metro\src\DeltaBundler\traverseDependencies.js:391:31)
at Array.map (<anonymous>)
at resolveDependencies (C:\Users\reactnative\navigate\node_modules\metro\src\DeltaBundler\traverseDependencies.js:388:18)
at C:\Users\reactnative\navigate\node_modules\metro\src\DeltaBundler\traverseDependencies.js:261:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\Users\reactnative\navigate\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
Dependencies in package.json
{
"name": "navigate",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.6.3",
"react-native": "0.58.5",
"react-navigation": "^3.3.2"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}

Related

react-native run-android command failed

**> bundling failed: Error: Unable to resolve module
metro/src/lib/bundle-modules/HMRClient from
D:\korero_latest_app\korero_app\node_modules\react-native\Libraries\Utilities\HMRClient.js:
Module metro/src/lib/bundle-modules/HMRClient does not exist in the
Haste module map
This might be related to
https://github.com/facebook/react-native/issues/4968 To resolve try
the following:
1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
at ModuleResolver.resolveDependency (D:\korero_latest_app\korero_app\node_modules#react-native-community\cli\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:183:15)
at ResolutionRequest.resolveDependency (D:\korero_latest_app\korero_app\node_modules#react-native-community\cli\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (D:\korero_latest_app\korero_app\node_modules#react-native-community\cli\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
at Object.resolve (D:\korero_latest_app\korero_app\node_modules#react-native-community\cli\node_modules\metro\src\lib\transformHelpers.js:261:42)
at dependencies.map.result (D:\korero_latest_app\korero_app\node_modules#react-native-community\cli\node_modules\metro\src\DeltaBundler\traverseDependencies.js:399:31)
at Array.map ()
at resolveDependencies (D:\korero_latest_app\korero_app\node_modules#react-native-community\cli\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:18)
at D:\korero_latest_app\korero_app\node_modules#react-native-community\cli\node_modules\metro\src\DeltaBundler\traverseDependencies.js:269:33
at Generator.next ()
at asyncGeneratorStep (D:\korero_latest_app\korero_app\node_modules#react-native-community\cli\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
DELTA [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓░░░░ 76.0% (930/1067),
failed.
::ffff:127.0.0.1 - - [03/Feb/2020:08:51:14 +0000] "GET
/index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 -
"-" "okhttp/3.12.1"**
package.json:-
{
"name": "korero_app",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.19.0",
"formik": "^1.5.7",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-action-button": "^2.8.5",
"react-native-elements": "^1.1.0",
"react-native-floating-action": "^1.17.0",
"react-native-gesture-handler": "^1.3.0",
"react-native-material-textfield": "^0.12.0",
"react-native-reanimated": "^1.1.0",
"react-native-tab-view": "^2.7.3",
"react-native-vector-icons": "^6.5.0",
"react-navigation": "^3.11.0",
"react-redux": "^7.1.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"styled-components": "^4.3.1",
"tls": "0.0.1"
},
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
bable.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
Resolve building modules:
Delete the node_modules
yarn install
yarn add jetifier
yarn run jetify
rebuild project in android studio
Happy coding :)

RN - Could not find a declaration file for module vendor/react-native-vector-icons

I am using expo 34.0.1 for react native development. I am using TypeScript for the project and running tsc --project . --noEmit in a testing script with jest. That leads to the following error:
node_modules/#expo/vector-icons/build/createIconSet.d.ts:2:55 - error
TS7016: Could not find a declaration file for module
'./vendor/react-native-vector-icons/lib/create-icon-set'.
'../node_modules/#expo/vector-icons/build/vendor/react-native-vector-icons/lib/create-icon-set.js'
implicitly has an 'any' type.
2 export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from
'./vendor/react-native-vector-icons/lib/create-icon-set';
Found 1 error.
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! # tsc-test: tsc
--project . --noEmit npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the # tsc-test script. npm ERR! This is probably not a problem with
npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
/Users/.npm/_logs/2019-08-31T19_25_49_598Z-debug.log
tsconfig.json:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"module": "es6",
"target": "es6",
"lib": ["es2016", "esnext.asynciterable"],
"jsx": "react-native",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"types": ["jest"],
"moduleResolution": "node",
"allowJs": false,
"esModuleInterop": true
},
"exclude": ["node_modules"]
}
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"test": "npm run tslint && npm run tsc-test && npm run jest",
"tslint": "tslint --project .",
"tsc-test": "tsc --project . --noEmit",
"jest": "jest"
},
"dependencies": {
"#types/enzyme": "^3.10.3",
"expo": "^34.0.1",
"moment": "^2.24.0",
"react": "16.9.0",
"react-dom": "^16.9.0",
"react-moment": "^0.9.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-elements": "^1.1.0",
"react-native-gesture-handler": "~1.3.0",
"react-native-reanimated": "~1.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.4",
"react-navigation": "^3.12.1"
},
"devDependencies": {
"#types/expo": "^32.0.13",
"#types/jest": "^24.0.18",
"#types/react": "^16.9.2",
"#types/react-test-renderer": "^16.9.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest": "^24.9.0",
"jest-expo": "^34.0.1",
"react-test-renderer": "^16.9.0",
"ts-jest": "^24.0.2",
"tslint": "^5.19.0",
"tslint-config-airbnb": "^5.11.1",
"typescript": "^3.5.3"
},
"private": true,
"jest": {
"preset": "jest-expo",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
"^.+\\.tsx?$": "ts-jest"
},
"testMatch": [
"**/__tests__/**/*.ts?(x)",
"**/?(*.)+(spec|test).ts?(x)"
],
"moduleFileExtensions": [
"js",
"ts",
"tsx"
],
"globals": {
"ts-jest": {
"tsConfig": {
"jsx": "react"
}
}
},
"setupFilesAfterEnv": [
"./src/setupTests.js"
]
}
}
Any ideas how to solve that?
Step 1:
Inside the "scripts" object in your package.json simply add:
"postinstall": "npx typesync"
The benefit of using npx here is that it doesn't require you to install anything on your machine.
Step 2:
Run yarn or npm install to effectively run the 'postinstall' script.
Once all your missing packages are added, you'll get a list of all the new typings to be added to your project
It may look something like this:
📦 yourAppNameHere — package.json (4 new typings added, 0 unused typings removed)
├─ + #types/babel__core
├─ + #types/react-native-vector-icons
├─ + #types/react
Step 3:
You will likely be asked to run npm install or yarn again, which will install the packages added and you will be good to go!
I can see that you are using eslint. So, it is safe to edit your compiler options and add
"noImplicitAny": false,
this will silence your error. And eslint will catch any implicit any in your code.
I hope this is correct from my understanding :-)

Cannot use React Native CLI to initialize project with version lower than 0.60.0

I'm trying to use react-native init ABC --version 0.57.0 and it has an error. Tried to use other formats of init, but still doesn't work.
If anybody needs to install 0.59.x do this:
mkdir rn59cli
cd rn59cli
npm init -f
npm install react-native-cli
node_modules/.bin/react-native init Rn59SampleApp --version 0.59.10
Using yarn v1.21.1
Installing react-native#0.59.10...
yarn add v1.21.1
warning ../../package.json: No license field
info No lockfile found.
[1/4] 🔍 Resolving packages...
info Direct dependencies
└─ react-native#0.59.10
$ cat Rn59SampleApp/package.json
{
"name": "Rn59SampleApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.10"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"babel-jest": "^25.1.0",
"jest": "^25.1.0",
"metro-react-native-babel-preset": "^0.58.0",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
Try re-installing react-native CLI

Npm install rally coding eslint in atom is not working

I've installed linter and linter-eslint plugin in atom. But installing eslint rallycoding is giving trouble. What might be the issue, I can not figure it out.
Following is the error message:
E:\zreactNative\test\ReduxTest>npm install --save-dev eslint-config-rallycoding
npm WARN deprecated eslint-plugin-class-property#1.1.0: please use eslint-plugin-babel and babel/semi
npm ERR! Unexpected end of JSON input while parsing near '...2.0","esutils":"^2.0.'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\bbeck\AppData\Roaming\npm-cache\_logs\2018-09-25T07_13_26_749Z-debug.log
2018-09-25T07_13_26_749Z-debug.log
package.json:
{
"name": "ReduxTest",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-elements": "^0.19.1",
"react-native-vector-icons": "^5.0.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
},
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "4.0.0",
"eslint-plugin-babel": "^5.2.0",
"jest": "23.5.0",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}
Solved it. It was an issue of npm. npm cache clean --force does the trick.

Error while running react-native run-android

https://facebook.github.io/react-native/docs/getting-started.html
I have followed the instruction that are on this link. But app is not starting on emulator
I then follow the instructions on Delete the node_modules folder -
rm -rf node_modules && npm install
Reset packager cache - rm -fr
$TMPDIR/react-* or node_modules/react-native/packager/packager.sh
--reset-cache
Clear watchman watches - watchman watch-del-all Recreate the project
from scratch
and also create whole new project again to but every time this error pops-up
I have
npm 4.6.1
node v8.11.4
jdk version 8
{
"name": "p3",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.4.1",
"react-native": "0.56.0"
},
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "5",
"jest": "23.5.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
Any help please.
It has been observed that, latest react native version is having a bug in dependencies. I have found it working by modifying the package.json file. Please upadate your package.json file by adding below code:
"dependencies": {
"react": "^16.4.1",
"react-native": "^0.55.4"
},
"devDependencies": {
"babel-preset-react-native": "^4.0.0",
},
and then use below commands:
npm update
npm cache clean --force
cd android
gradlew clean
cd..
react-native run-android
Try creating the project using stable versions, do react-native init <Project Name> --version="0.55.2". After this try react-native run-android.
If you want to keep using the react-native 0.56.0 version,
Try this configuration in package.json:
"dependencies": {
...
"babel-runtime": "^6.26.0",
"react": "^16.4.2",
"react-native": "^0.56.0",
...
},
"devDependencies": {
...
"#babel/core": "^7.0.0-beta.56",
"babel-eslint": "^8.2.3",
"babel-jest": "^22.1.0",
"babel-preset-react-native": "^5.0.0",
...
},
If that doesn't work, also try running this script:
Add a script to the scripts section in the package.json file under the root project dir and call it build:android: (The name doesn't matter)
{
...
"scripts": {
...
"build:android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
...
},
...
}
Run it from the terminal like this:
npm run build:android
Hope it helps :)