I updated all my dependencies to use hooks in React Native. They are:
"axios": "^0.18.0",
"expo": "^32.0.0",
"react": "^16.8.6",
"react-native": "^0.59.5",
"react-navigation": "^3.9.0"
Before updating dependencies, the development server worked well, but after updating to newest versions it shows errors:
error: bundling failed: Error: Unable to resolve module `react-native/Libraries/Components/View/ViewStylePropTypes` from `C:\Koolpeace\apps\node_modules\react-native-reanimated\src\createAnimatedComponent.js`: Module `react-native/Libraries/Components/View/ViewStylePropTypes` does not exist in the Haste module map
INFO
21:13
This might be related to https://github.com/facebook/react-native/issues/4968
INFO
21:13
To resolve try the following:
INFO
21:13
1. Clear watchman watches: `watchman watch-del-all`.
INFO
21:13
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
INFO
21:13
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
INFO
21:13
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
I tried everything on the internet. I emptied caches. I emptied all kinds of caches including
react-native start --reset-cache
None of them worked for me. I deleted node_modules and reinstalled everything several times. It was the same. I wrote only simple things and the problem must be something with crash within dependencies. But I have no idea where it got wrong. I also tried downgraded. Till to
"react": "^16.8",
"react-native": "^0.59"
The minimum versions that support hooks. It did not work either.
I tried to code on Expo Snack. The snack raises type error: undefined is not a function. near) useEffect...
I guess the expo snack platform uses outdated React and React Native.
Now, what can I do? How can run the development server and continue to debug using QR code and my phone?
Hooks aren't still supported in Expo. There's a feature request about this, but it's still in progress: https://expo.canny.io/feature-requests/p/support-react-1680-aka-hooks
Related
I installed package "react-native-firebase/storage" as per git instructions (npm install #react-native-firebase/storage --save)
Then I imported package with "import rnFb from '#react-native-firebase/storage'";
However its giving me the error "#react-native-firebase/app/lib.common does not exist in the Haste module map"
Ive tried the instructions given on error message..but to no avail
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-*`.
Can anyone help?
Thanks
UPDATE 11/20
#react-native-firebase/storage folder in present in node_modules folder....however "app" folder is not (which is what the error appears to be complaining about)
cd into your project directory.
Install app package first by,
yarn add #react-native-firebase/app
Then install storage package by yarn add #react-native-firebase/storage.
Then execute yarn install and the installed packages will be linked to the project.
You can verify the installation by checking package.json file. Dependencies in package.json should be as follows.
"dependencies": {
"#react-native-firebase/app": "^6.0.4",
"#react-native-firebase/storage": "^6.0.4",
"react": "16.9.0",
"react-native": "0.61.4",
"react-native-gesture-handler": "^1.5.0",
"react-navigation": "^4.0.10"
},
What i believe is you havent downloaded the #react-native-firebase/app which is a pre-requisite to dwonload . Try downloading App firebase first , and then try. Hope it helps. Otherwise feel free to ask any doubts
npm i #react-native-firebase/storage
react-native link #react-native-firebase/storage
I'm using a local module in package.json that also has react-native as a dependency.
In my APP package.json:
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-services": "file:///Users/R01/Projects/react-native-services"
In my react-native-services package.json:
"react": "16.4.1",
"react-native": "0.56.0"
So when running react-native run-android the Metro Bundler throws:
Looking for JS files in
/Users/R01/Projects/RNApp
/Users/R01/Projects/react-native-services
Metro Bundler ready.
Loading dependency graph...(node:72824) UnhandledPromiseRejectionWarning: Error: jest-haste-map: #providesModule naming collision:
Duplicate module name: Sample
Paths: /Users/R01/Projects/react-native-services/node_modules/react-native/Libraries/Sample/package.json collides with /Users/R01/Projects/RNApp/node_modules/react-native/Libraries/Sample/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
at setModule (/Users/R01/Projects/RNApp/node_modules/jest-haste-map/build/index.js:446:17)
at workerReply (/Users/R01/Projects/RNApp/node_modules/jest-haste-map/build/index.js:496:9)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:182:7)
(node:72824) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:72824) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
error: bundling failed: Error: jest-haste-map: #providesModule naming collision:
Duplicate module name: Sample
Paths: /Users/R01/Projects/react-native-services/node_modules/react-native/Libraries/Sample/package.json collides with /Users/R01/Projects/RNApp/node_modules/react-native/Libraries/Sample/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
at setModule (/Users/R01/Projects/RNApp/node_modules/jest-haste-map/build/index.js:446:17)
at workerReply (/Users/R01/Projects/RNApp/node_modules/jest-haste-map/build/index.js:496:9)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:182:7)
I already tried:
With both npm and yarn (upgraded) installations but react-native run-android throws always the same error.
watchman watch-del-all rm -rf node_modules && npm install rm -fr $TMPDIR/react-* npm cache clean npm start -- --reset-cache
watchman watch-del-all
rm -rf node_modules && npm install
rm -fr $TMPDIR/react-*
npm cache clean
npm start -- --reset-cache
for more check out here
Faced same issue
Resolved it !!
All the npm packages in project have node modules.
Make sure that node_modules directory inside packages should not include already present node module.
In my case react-native was present in node_modules of my project as well as node_modules of another forked library.
As the library was forked, I could remove node_modules directory from it and the issue got resolved.
I respond myself.
As a temporary solution, and given putting the dependencies in peerDependencies didn't work either, I've put the react and react-native in devDependencies of the react-native-services package.
I also got the same error. I tried below steps, its works like a charming.
Please remove all react-native specific folders from "%appdata%\Temp" and then try below commands:
rimraf node_modules
npm cache clean --force
npm install
rm -rf ios/build
Change /Users/Jebasuthan/XcodeProject/Game/ios/Pods/React/package.json to something else
non recursive
const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
resolver: {
blacklistRE: blacklist([
/node_modules\/.*\/node_modules\/react-native\/.*/,
])
},
};
error: bundling failed:
Error: Unable to resolve module AccessibilityInfo from D:\MyApp\node_modules\react-native\Libraries\react-native\react-native-implementation.js: Module AccessibilityInfo does not exist in the Haste module map
Its some incompatible versioning problems in React native.Try this it will work
Change versions of following in package.json
In dependencies :-
"react": "16.3.1"
"react-native": "0.55.4"
In devDependencies :-
"babel-preset-react-native": "2.1.0"
Delete node_modules and run npm install --save
Then run application by react-native run-android
It will run fine ...
Heading
first of all try with
npm start -- --reset-cache
If this is not working
than delete node modules & npm install
npm start -- --reset-cache
I create a React-Native project using Windows 10 and it works perfectly on Android.
I copy the files to my iMac and run the project in the iOS platform, but when I try to run the project in iOS I got the following error:
error: bundling failed: Error: Unable to resolve module `axios` from `/Users/fabio/react/VirtusVSTS/src/components/Login.js`: Module does not exist in the 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 (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:158:1476)
at ResolutionRequest.resolveDependency (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:92:16)
at DependencyGraph.resolveDependency (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/node-haste/DependencyGraph.js:271:4465)
at dependencies.map.relativePath (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:379:19)
at Array.map (<anonymous>)
at resolveDependencies (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:378:16)
at /Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:203:33
at Generator.next (<anonymous>)
at step (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:296:307)
at /Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:296:467
The problem is related to the axis import.
I try to create a new project in my iMac and import axis on it. It works perfectly.
But now I don't know what is happening with the project that I create on Windows, why it can't import the axis module on iMac.
I run all the steps that appear in the error message to try to fix the problem, but it won't work.
How I can fix this problem?
The axios module folder is not present in my node_modules folder. The comments from user #needsleep help me understand why the axios module was not present in my React Native project.
I begin to use Yarn and use it to install the axios module(yarn add axios) and it works now.
remove axios and after in install using yarn and it's working fine
When I install NativeBase and React-Native-Router-Flux in my react-native project I get this error:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
Error: #providesModule naming collision:
Duplicate module name: react-native-vector-icons
Paths: /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/local-cli/core/__fixtures__/files/package.json collides with /Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native-router-flux/node_modules/react-native/local-cli/core/__fixtures__/files/package.json
This error is caused by a #providesModule declaration with the same name across two different files.
at HasteMap._updateHasteMap (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:159:13)
at p.getName.then.name (/Users/vittori/Desktop/repos/GitHubExamples/native-starter-kit/node_modules/react-native/packager/src/node-haste/DependencyGraph/HasteMap.js:134:31)
Solution was posted here
yarn add react-native-router-flux#3.38.0
You should be able to update
react-native-router-flux using:
npm i react-native-router-flux --save
It may be that trying to start the react-native packager fails again and running may be useful:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start --reset-cache`.
You may see once attempting to run the packager again errors such as:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name
You may need to run the npm install for react-native-router-flux again.
If you work with yarn, please run this command.
yarn add react-native-router-flux#3.38.0
And if you work with npm, please run this command.
npm install react-native-router-flux#3.38.0 --save
Also you still get the issue, please downgrade react-native version to 0.41.2.
Then, it will work.
NativeBase 2.1.4 solves this issue