Why? Why is react looking here? I have another test android project and it also does not have react package located there, yet it runs perfectly. Why is this one looking here? The only difference is I first did setup a directory below. In MyProject/App is where i did the init. I then moved the index.js files and package.json a level up to top level directory. I want to know the WHY of this error!
Here is the error:
error: bundling: UnableToResolveError: Unable to resolve module
react/lib/ReactComponentTreeHook from /Users/Admin/Projects/MyProject/node_modules/react- native/Libraries/Performance/Systrace.js:
Module does not exist in the module map or in these directories:
/Users/Admin/Projects/MyProject/node_modules/react- native/node_modules/react/lib
, /Users/Admin/Projects/MyProject/node_modules/react/lib
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 packager cache: rm -fr $TMPDIR/react-* or `npm start --reset-cach
All these steps I have tried. They don't fix it. I will probably do another init a level above but still I want to know whey it's looking there. Is there a module map being setup somewhere incorrectly? Where do I look for this?
UPDATE: After doing init properly in the root directory of the app I now get something else:
Loading dependency graph, done.
error: bundling: UnableToResolveError: Unable to resolve module react/lib/ReactDebugCurrentFrame from /Users/Admin/Projects/MyProjectRoot/node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js: Module does not exist in the module map or in these directories:
This leads to suggestions that you need alpha version of react to go along with latest react:
https://github.com/facebook/react-native/issues/13017
But doing this does not work. It just leads back to the same issue I had to begin with about ReactComponentTreeHook.
Again, same suggestions about how to fix it. rm -rf node_modules followed by npm install! But I also did a npm install --save on react react-native. I think I need some response from react-native team on how to properly interpret this kind of error. What's going on here?
Xcode 8.2 still occur same error. Three lines bellow fixed it for me :)
Downgrade react(16.0.0-alpha.12 -> 16.0.0-alpha.6) & react-native(0.45.0 -> 0.44.0)
rm -rf node_modules/react
npm i react#16.0.0-alpha.6 -S
npm i react-native#0.44.0 -S
Then run react-native run-ios
Hope this help.
The problem is that the npm init, npm install --save react -react-native does not install the correct versions. What you need to do is look at the version of react inside package.json In my case it was an alpha.
So right now need to do:
npm install --save react#16.0.0-alpha.6 react-native
but check what's inside your package.json and watch any warning messages carefully
Try install react-native-git-upgrade
$ npm install -g react-native-git-upgrade
and then run
$ react-native-git-upgrade
for me it works.
This error happens when someone upgrade react-native version.
$ npm install -g react-native-git-upgrade
$ npm install react-native#latest --save
$ react-native-git-upgrade
Close all terminals.
Then clear cache. Remove directory ~/Library/Developer/Xcode/DerivedData
In Xcode, Product-> Clean
Then run simulator from Xcode or run code on the attached device again.
Related
The issue I have is that npm start cannot start. I tried to fix with audit, deleted node_dependency directory and re-installed with npm, nothing works.
One concrete issue I see is:
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.44.2"
Yet, I also see npm -v webpack -> 6.14.14. How do I need to debug this?
Your npm -v webpack command is not correct. it will return npm version and not the webpack version.
Try npm ls webpack . you can also check your package.json file for the packages you have. or run npm ls for the full list.
make sure to install the required dependency as it states.
Eventually I could not solve the package problem with an informed debugging.
What I did was to (npm install --global yarn) and start the application through it (yarn start). It worked a lot to download the packages and eventually started the application.
So, I guess I need to switch to yarn after this point, which is ok, as long as it works :)
I am trying to run react-native start and the following error appears
"Cannot find module 'metro-core'. Run CLI with --verbose flag for more details.
Prior to getting this message, I had a different error message saying modules was not located, so I tried this:
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
I just typed in the react-native start and the error message popped up on the simulator, which told me to look at my terminal for the error message.
This is common with NPM. Do not worry. Just follow a few steps and you will get your package.
Step 1: $ npm cache clean --force
Step 2: delete node_modules by $ rm -rf node_modules folder or delete it manually by going into the directory and right-click > delete.
Step 3: npm install
To start again, $ npm start
This worked for me. Hopes it works for you too.
Still, if it is there, kindly checks the error it displays in red and acts accordingly.
Be careful when using rm -rf.
After that,
While working on Unix systems.
Sometimes it may not allow you to install such packages. For that, you need sudo permissions.
Sometimes, the package is installed but only in your local modules, and when you try to import(require) it from outside of the directory, the error occurs.
Sometimes, your compiler read your dependencies, but not able to find this package in that, at that time also you face this error.
Anyways, don't worry. You just have to follow some steps below.
A best practice is to initialize your project using npm init before starting development. This will initialize your project and generate package.json file. (Ignore it if your project have package.json file)
Then, if you want any library as dependencies, try --save with npm install command. This will save your dependency in package.json file.
e.g. npm install metro-core --save
If any package is not found after installing, install it globally by -g flag.
Globally installed packages will be accessible within your system. e.g. npm install metro-core -g.
Note: Unix system needs SUDO permission for installing it globally.
I hope this will help you.
npm install metro-core
use command then run
When creating a new react native project using the standard react-native init MyApp and running react-native run-ios for the first time I'm seeing the following error
error: bundling failed: Error: Unable to resolve module `#babel/runtime/helpers/interopRequireDefault` from `/Users/chrisedgington/Development/ReactNative/SixNationsPredictor/index.js`: Module `#babel/runtime/helpers/interopRequireDefault` 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 (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
at ResolutionRequest.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
at DependencyGraph.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
at Object.resolve (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/lib/transformHelpers.js:180:25)
at dependencies.map.result (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
at /Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
at Generator.next (<anonymous>)
at step (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)
I've tried running the suggested but still see the same issue. I've seen a few posts about similar issues but nothing specifically seems to say how to resolve the problem in react-native.
macOS: 10.13.6
node: 8.11.3
react-native-cli: 2.0.1
react-native: 0.57.1
Have a go and try:
npm add #babel/runtime
Or upgrade babel runtime:
"#babel/runtime": "7.0.0-beta.55"
I tried all the things mentioned above, and, I found myself here again tonight.
Running from a nrwl mono repo, I had to cd into the app that was having the problem and run.
jest --clearCache
You should first quit the metro terminal before executing
npm add #babel/runtime
npm install
You should add and install babel for your projects
npm add #babel/runtime
npm install
If The error is not fixed, Try:
npm start --reset-cache
The issue for me was that #babel/runtime was installed as a dev-dependency instead of just a normal (non-dev) dependency
Try to update your npm version first
npm update -g npm#version or sudo npm -gf update npm#version
and then just add the babel runtime at your react native project
npm add #babel/runtime
Try upgrading your packages. You could have an old package causing the problem:
yarn upgrade-interactive --latest
Current error message suggests these steps to fix this:
Clear watchman watches: watchman watch-del-all
Delete node_modules: rm -rf node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
The last one solved it for me.
I had this problem today (April 2021), and I could solve it only by removing the webpack-node-externals package from my webpack configuration.
For me the solution was (Mac):
Stop IntelliJ
Enter terminal
Run: npx browserslist#latest --update-db -g
Run: npm cache verify
Start IntelliJ
If still not working:
Delete node_modules fron project if exists
Run: npm cache verify
Run npm install -f in project
Run: npx browserslist#latest --update-db -g
Problem:
I was in the middle of upgrading flow to typescript and I used #khanacademy/flow-to-ts to convert js files to ts. the lib not only changed the js files of the app but also it converted all js files in node_modules directory.
Solution:
I had to remove the node_modules and npm -i. This time when I checked the node_modules the interopRequireDefault.js file was there.
In case you are working with Yarn workspaces please note you are running react-native start from the right project...
Install latest Babel/runtime
=> install #babel/runtime
After that clean or reset the cache
=> npm start -- --reset-cache after
or
npm cache clean --force
I accidentally deleted my node_modules and package-lock.json. I used npm i to regenerate them and suddenly I was getting the above error. I solved it in two ways.
By uninstalling the app and using the following commands.
npx jest --clearCache
npm update
npm i
npx react-native run-android
By deleting the local repository and re-cloning it.
Hope this helps you.
I just uninstalled watchman. It worked for me.
brew uninstall watchman
Someone may find this helpful. I had the same problem while using turborepo and Expo.
Resolved it by adding 'node-linker=hoisted' to .npmrc.
Had this issue none of the above listed solutions worked for me, I had to go to node_modules/jest-haste-map/build/index.js
changed const crawl = canUseWatchman && this._options.useWatchman ? _watchman.default : _node.default;
to const crawl = canUseWatchman && this._options.useWatchman ? _node.default : _node.default;
I'm following a tutorial however have not been able to get any help from the course owner or fellow students so please help.
I'm encountering the Unable to resolve module error seen below in Windows 10.
This has been after I have created a new react native project, executing all the commands from the command line:
react-native init techstack
And then adding within command line of the project directory:
npm install --save redux react-redux
I have followed the advice given in the error message running first:
npm rm -rf node_modules && npm install
And then
npm watchman watch-del-all
And finally trying:
npm rm -fr $TMPDIR/react-*
And also:
npm start -- --reset-cache
However no matter what I tried it still did not resolve the issue and the exact same error persisted
It looks like the error came from not finding the src/app module. It's not from the node-modules or watchman. Check the imports in the index.android.js.
Please enter ./src/app instead of .src/app
i am getting the below error.
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
Body:
{"from":"D:\AwesomeProject\index.android.js","to":"react","message":"Unable to resolve module react from D:\\AwesomeProject\\index.android.js: Module does not exist in the module map or in these directories:\n D:\AwesomeProject\node_modules\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start --reset-cache.","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]}
onResponse
DevServerHelper.java:332
execute
RealCall.java:126
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1112
run
ThreadPoolExecutor.java:587
run
Thread.java:818
{"from":":\\AwesomeProject\\index.android.js","to":"react","message":"Unable to resolve module `react`
i tried every workaround given by the log still it's not working..
Check whether the folder named react exists inside node_modules named folder or not, and if it is not there then,
stop the server and again install 'react'
npm install react --save
after the installation please restart the sever by reseting the cache
npm start --reset-cache
Then run your application
Try
npm install
hopefully this resolve
There is a problem with the node module i had to remove the node module and add then i had to downgrade the the React-Native Library and Run the command react-native start and then react-native run-android after that it worked for me.