I am trying to integrate the latest version of log4js (techically log4js-node but it seems log4js is now used for the latter) into a React Native project. I installed the package using Yarn 1.0.2 and wrote a few lines of code just to test the concept of configuring a logger and seeing some logs. When I tried to start the React Native packager and open the app in my emulator, I got the following exception:
error: bundling failed: Error: Unable to resolve module 'fs' from 'C:\path_to_project\node_modules\log4js\lib\log4js.js': Module 'fs' does not exist in the Haste module map
I looked at the above file and noticed that there is a variable that depends on the fs package. I installed the fs package and tried again, but got this error:
error: bundling failed: Error: While trying to resolve module 'fs' from file 'C:\path_to_project\node_modules\log4js\lib\log4js.js', the package 'C:\path_to_project\node_modules\fs\package.json' was successfully found. However, this package itself specifies a 'main' module field that could not be resolved ('C:\path_to_project\node_modules\fs\index'). Indeed, none of these files exist:
* ‘C:\path_to_project\node_modules\fs\index.js(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)’
* ‘C:\path_to_project\node_modules\fs\index.js\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)’
at ResolutionRequest.resolveDependency (C:\path_to_project\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:103:15)
at DependencyGraph.resolveDependency (C:\path_to_project\node_modules\metro\src\node-haste\DependencyGraph.js:272:4579)
at dependencies.map.relativePath (C:\path_to_project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:376:19)
at Array.map (native)
at resolveDependencies (C:\path_to_project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:374:16)
at C:\path_to_project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:212:33
at Generator.next (<anonymous>)
at step (C:\path_to_project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:297:313)
at C:\path_to_project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:297:473
I am aware that the fs package is not currently in use but if that's the case, how is the log4js package being used? It seems to be regularly updated, looking at its Github repository.
I noticed that when I do install fs, I get the graceful-fs package in my node_modules folder instead. (but in package.json I see the fs package, not graceful-fs)
As well as doing the above, I tried cleaning Gradle, installing graceful-fs explicitly and installing react-native-fs but all these things made no difference.
Related
I am using https://reactnative.dev/docs/environment-setup 0.64
I npm install #walletconnect/client
put below import in App.js
import WalletConnect from "#walletconnect/client";
after npx react-native run-ios and got below error:
error: Error: While trying to resolve module `crypto` from file `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/#pedrouid/iso-crypto/dist/cjs/helpers/env/node.js`, the package `/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/hahaha/workspace/mobile/reactnative/nonft/node_modules/crypto/index.js`. Indeed, none of these files exist:
I tried to remove node_modules folder and npm install again but still get the same error.
I am sure that it is thrown by #walletconnect/client because when I removed
import WalletConnect from "#walletconnect/client";
then the error gone
crypto is a built in Node module, which isn't available in React Native, as iOS/Android apps don't run with a Node runtime - only web apps do.
There are a few ways to solve this problem, all of them fairly hacky.
One way is to replace the crypto module with a React Native native module that does the same thing. React-native-crypto is the package used by create-react-native-dapp (https://www.npmjs.com/package/create-react-native-dapp) to integrate with WalletConnect: https://www.npmjs.com/package/react-native-crypto
To get this integration working, note that you'll need to be able to link modules and run rn-nodeify, as it mentions in the instructions on that npm package:
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev tradle/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
If you're using Expo, note that you'll need to eject Expo before this can work.
Another hacky workaround is to run WalletConnect in a WebView using react-native-webview. There's an old but working example of this that you can just use to plug and play WalletConnect without requiring linking that you can get here: https://github.com/cawfree/react-native-walletconnect
Note that that repo is archived and effectively hardcoded to WalletConnect version 1.0.0, but it's a pretty simple codebase - you can just effectively copy and paste its code and update it to the latest version of WalletConnect to get it working with a later version if desired.
As a final note, there are multiple ways to get node modules running in React Native on top of rn-nodeify. If you'd like to explore other methods of getting node modules running, here's a quick rundown of other possibilities: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd
I have recently integrated react-native-web into my native project and have included webpack. I've followed all the instructions listed here.
However, when trying to run using the webpack command listed on the bottom of that page, i keep getting the error:
ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react-native' from '<*path to root*>'
I have the preset metro-react-native-preset already installed and my babel config looks like the following:
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset']
};
Im currently using React Native 0.62
Could you try to install 'babel-preset-react-native'?
npm install --save -dev babel-preset-react-native
You said you've got metro-react-native-preset already installed but your config has metro-react-native-babel-preset - I assume that mismatch is just accidental?
Anyway, that's probably unrelated. Here's a few things to try:
Have you verified you've got 0.62 of react native installed? I.e. in the npm lock file, as maybe you're on an older version (pre 0.57) which uses that older plugin.
Have you got a .babelrc file too, perhaps, with the other plugin defined instead?
Similar to (1), have you tried to delete the lock file and/or node_modules folder and run npm install again from scratch so versions match up properly.
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
:)
When trying to run my React Native app I get this error:
error: bundling failed: Error: Expected path `/Users/jgallaso/Projects/aerogear/aerogear-react-native-core/index.js` to be relative to one of the project roots
at toLocalPath (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/lib/toLocalPath.js:33:9)
at ModuleCache.getModule (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/ModuleCache.js:94:20)
at ModuleResolver._getFileResolvedModule (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:320:42)
at ModuleResolver.resolveDependency (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:311:989)
at ResolutionRequest.resolveDependency (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:96:16)
at DependencyGraph.resolveDependency (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:269:4352)
at /Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:201:36
at next (native)
at step (/Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:306)
at /Users/jgallaso/Projects/aerogear/aerogear-js-sdk/example/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:536
BUNDLE [android, dev] ./index.js ▓▓▓▓▓▓▓▓▓░░░░░░░ 56.6% (331/440), failed.
My app has a dependency installed aerogear-react-native-core that is a Native Module. Source code is at: https://github.com/josemigallas/aerogear-react-native-core
This package on the other hand depends on other TS one (I ignore if this is problematic) and this code is located at: https://github.com/josemigallas/aerogear-js-sdk/tree/poc_react_native_library/packages/core
And the app code that actually tries to use all this is located at: https://github.com/josemigallas/aerogear-js-sdk/tree/poc_react_native_library/example/react-native
This means:
App
└─┬ aerogear-react-native-core#0.0.2
└── #aerogearmobile/core#1.0.0
Since this is all at development stage, nothing is pushed to npmjs, I'm just using npm link to include all dependencies.
Honestly I don't have a clue why this is failing, without the second dependency everything worked all right so that makes me think typescript has something to do. However, the error is complaining about aerogear-react-native-sdk's index.js file so maybe the error is related with the link.
I tried deleting all caches, re-installing npm modules, re-running the bundler many times...
If you have used "npm link" in the project, that might be the reason. Metro Bundler does not work with symlink correctly. Try to install the dependency without using "npm link".
I have an AURELIA application that uses the node module 'crypto'.
It works fine with GULP/JSPM (after 'npm install crypto' and 'jspm install crypto').
Now I want to use aurelia-cli instead of JSPM.
But I didn't succeed to load 'crypto' with the Aurelia-cli.
When building the app with 'au build' I got the error:
Error: ENOENT: no such file or directory, open '......\src\crypto.js'
I certainly need to reference 'crypto' in aurelia.json file but I don't find what to insert in this file.
Thanks if somebody could provide aurelia.json content for using crypto.