bundling failed: Error: While resolving module `metro/src/lib/bundle-modules/HMRClient` - react-native

I have created a new project called metro. when I run it, this error appears on my cli nodejs:
error: bundling failed: Error: While resolving module metro/src/lib/bundle-modules/HMRClient, the Haste package metro was found. However the module src/lib/bundle-modules/HMRClient could not be found within the package. Indeed, none of these files exist:
D:\programming\react native\metro\src\lib\bundle-modules\HMRClient(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
D:\programming\react native\metro\src\lib\bundle-modules\HMRClient\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
at resolveHasteName (D:\programming\react native\metro\node_modules\metro-resolver\src\resolve.js:236:9)
at Object.resolve (D:\programming\react native\metro\node_modules\metro-resolver\src\resolve.js:103:20)
at ModuleResolver.resolveDependency (D:\programming\react native\metro\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:143:31)
at ResolutionRequest.resolveDependency (D:\programming\react native\metro\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (D:\programming\react native\metro\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
at Object.resolve (D:\programming\react native\metro\node_modules\metro\src\lib\transformHelpers.js:261:42)
at dependencies.map.result (D:\programming\react native\metro\node_modules\metro\src\DeltaBundler\traverseDependencies.js:399:31)
at Array.map (<anonymous>)
at resolveDependencies (D:\programming\react native\metro\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:18)
at D:\programming\react native\metro\node_modules\metro\src\DeltaBundler\traverseDependencies.js:269:33
my react-native version is 0.59.8

I was stuck in the same issue,
So what I did was:
Find the file at the path: node_modules/react-native/Libraries/Utilities/HMRClient.js
Change the line: const MetroHMRClient = require('metro/src/lib/bundle-modules/HMRClient');
To: const MetroHMRClient = require('../../../#react-native-community/cli/node_modules/metro/src/lib/bundle-modules/HMRClient');
Was the only thing that worked for me, the only issue is that if you reinstall de node_modules you will need to replace the line again. Because that I added this script to my package.json:
"postinstall": "sed -i '' \"s#metro#../../../#react-native-community/cli/node_modules/metro#g\" ./node_modules/react-native/Libraries/Utilities/HMRClient.js"
The above script takes care of the replacing after each new npm install

I had the same issue after updating react-native to v0.59.8.
What I ended up doing was adding a dev dependency to metro package with npm install --save-dev metro which is currently at v0.54.1.
This solved it for me!

Becouse I named this project metro the problem had occured. I create a new project with new name the problem is solved.

Related

Unable to resolve module \expo\AppEntry React-native error

Hi i was working on project and everything worked before i added
npm install expo-barcode-scanner
after that i added some code on the screen tried to run it on expo and got an error :
Error: Unable to resolve module ./node_modules\expo\AppEntry from C:\Users\jacek\OneDrive\Pulpit\Neonki\neonkiV3/.:
None of these files exist:
node_modules\expo\AppEntry(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
node_modules\expo\AppEntry\index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
at ModuleResolver.resolveDependency (C:\Users\jacek\OneDrive\Pulpit\Neonki\neonkiV3\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:152:15)
at DependencyGraph.resolveDependency (C:\Users\jacek\OneDrive\Pulpit\Neonki\neonkiV3\node_modules\metro\src\node-haste\DependencyGraph.js:264:43)
at C:\Users\jacek\OneDrive\Pulpit\Neonki\neonkiV3\node_modules\metro\src\lib\transformHelpers.js:170:21
at Server._resolveRelativePath (C:\Users\jacek\OneDrive\Pulpit\Neonki\neonkiV3\node_modules\metro\src\Server.js:1196:12)
at async Server.requestProcessor [as _processBundleRequest] (C:\Users\jacek\OneDrive\Pulpit\Neonki\neonkiV3\node_modules\metro\src\Server.js:484:37)
at async Server._processRequest (C:\Users\jacek\OneDrive\Pulpit\Neonki\neonkiV3\node_modules\metro\src\Server.js:435:9)
i checked AppEntry.js in node_modules\expo and the path to App.js is correct
reinstalled expo and the error still occurs
Does someone know how to fix it?

Browserslist error when starting dev server

After clone repository and installing dependencies i run dev server of nuxt and got errors of browserslist in postcss dependency. I've searched by keyword "android all" in node_modules folder but got nothing.
I've tried to remove package-lock.json and node_modules folder and reinstall all dependencies but got the same result
When starting the dev server i've got following error log
Unknown browser query android all. Maybe you are using old Browserslist or made typo in query. 12:00:56
at unknownQuery (node_modules/postcss-preset-env/node_modules/browserslist/index.js:204:10)
at node_modules/postcss-preset-env/node_modules/browserslist/index.js:296:11
at Array.reduce (<anonymous>)
at resolve (node_modules/postcss-preset-env/node_modules/browserslist/index.js:237:18)
at browserslist (node_modules/postcss-preset-env/node_modules/browserslist/index.js:361:16)
at supportedBrowsers.some.supportedBrowser (node_modules/postcss-preset-env/index.js:438:105)
at Array.some (<anonymous>)
at stagedFeatures.filter.feature (node_modules/postcss-preset-env/index.js:438:80)
at Array.filter (<anonymous>)
at postcss$1.plugin.opts (node_modules/postcss-preset-env/index.js:438:44)
at creator (node_modules/postcss/lib/postcss.js:133:35)
at config.plugins.sortPlugins.map (node_modules/#nuxt/webpack/dist/webpack.js:4128:18)
at Array.map (<anonymous>)
at PostcssConfig.loadPlugins (node_modules/#nuxt/webpack/dist/webpack.js:4122:10)
at PostcssConfig.config (node_modules/#nuxt/webpack/dist/webpack.js:4158:14)
at StyleLoader.postcss (node_modules/#nuxt/webpack/dist/webpack.js:4215:39)
Thank you
Looks like there is an issue with browserlist.
Try to update your dependencies.
Browserlist 4.6.3 is the latest and this problem was fixed it it.

Error: While trying to resolve module 'prop-types' from file

Error when I run the command react-native run-android. The error was on metro bundler, when, the app is installing on my device, always shows this error.
The curious thing is that only happens me in this PC, I used other PC for a long time and when I pull git repo here (previously I was able to develop and test on that PC too), it's impossible to get it working for this error...
I think that maybe could be I removed yarn.lock many days ago and when I run npm install here produces this error?
I ommited my path for logic reasons:
Loading dependency graph, done.
error: bundling failed: Error: While trying to resolve module `prop-types` from file `PATH_TO_PROJECT_FOLDER\node_modules\react-redux\lib\components\Provider.js`, the package `PATH_TO_PROJECT_FOLDER\node_modules\react-redux\node_modules\prop-types\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`PATH_TO_PROJECT_FOLDER\node_modules\react-redux\node_modules\prop-types\index`. Indeed, none of these files exist:
* `PATH_TO_PROJECT_FOLDER\node_modules\react-redux\node_modules\prop-types\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
* `PATH_TO_PROJECT_FOLDER\node_modules\react-redux\node_modules\prop-types\index\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
at ResolutionRequest.resolveDependency (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:65:15)
at DependencyGraph.resolveDependency (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\node-haste\DependencyGraph.js:283:16)
at Object.resolve (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\lib\transformHelpers.js:261:42)
at dependencies.map.result (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:399:31)
at Array.map (<anonymous>)
at resolveDependencies (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:18)
at PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:269:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
at _next (PATH_TO_PROJECT_FOLDER\node_modules\metro\src\DeltaBundler\traverseDependencies.js:107:9)
DELTA [android, dev] ..\..\../index.android.js ▓▓▓▓▓▓▓▓░░░░░░░░ 51.9% (610/847), failed.
react-native: 0.59.1
react-native-cli: 2.0.1
Well.. I should not have deleted the yarn.lock file.
To fix:
Delete all .lock files on root folder project as #hend-el-sahli said.
yarn install
If you had the error unable to resolve module ./index, see that thread https://github.com/facebook/react-native/issues/24112
:)

How can I fix this react-native iOS error?

error: bundling failed: Error: While trying to resolve module `react-native` from file `/Users/ios/Desktop/android/android/index.js`, the package `/Users/ios/Desktop/android/android/node_modules/react-native/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/ios/Desktop/android/android/node_modules/react-native/Libraries/react-native/react-native-implementation.js`. Indeed, none of these files exist:
* `/Users/ios/Desktop/android/android/node_modules/react-native/Libraries/react-native/react-native-implementation.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
* `/Users/ios/Desktop/android/android/node_modules/react-native/Libraries/react-native/react-native-implementation.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
at ResolutionRequest.resolveDependency (/Users/ios/Desktop/android/android/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15)
at DependencyGraph.resolveDependency (/Users/ios/Desktop/android/android/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
at dependencies.map.relativePath (/Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
at Array.map (<anonymous>)
at resolveDependencies (/Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
at /Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
at Generator.next (<anonymous>)
at step (/Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
at /Users/ios/Desktop/android/android/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
at <anonymous>
Did you upgrade your react-native recently? If yes, then that might be the issue.
If not, check your node_modules folder for the file.
If nothing works, Then try this:
Delete the node_modules folder and close the packager.
Then reinstall using the command npm install from your project directory.

Error when try to import axios on iOS platform

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