Error : the package F:\xyz\hashgraphsdk\node_modules\@hashgraph\sdk\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (F:\xyz\hashgraphsdk\node_modules\@hashgraph\sdk\lib\index.cjs. Indeed, none of these files exist:

[ShivaSunny9]

when I am trying to use examples of Hashgraph JS SDK, in my react-native project. I am getting this error.
How do I solve this now?

my package.json for reference
{
  "name": "hashgraphsdk",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hashgraph/sdk": "^2.0.9",
    "dotenv": "^8.2.0",
    "react": "16.13.1",
    "react-native": "0.63.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.15.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

[ShivaSunny9]

can you please look into theis issue, we are getting an error when trying to integrate with react-native project

[robkainz]

I'm having the same problem while trying to update the SDK for my mobile wallet, which also uses react-native.

[robkainz]

Ok, so when I added cjs to my sourceExts in the resolver in metro.config.js, I got past that one error:

resolver: {
sourceExts: ['jsx','js','ts','tsx','cjs'],

The server still gives me this warning: warn Package @hashgraph/sdk has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /Users/robertkainz/Development/wallawallet-mobile/Ledgerama/node_modules/@hashgraph/sdk/package.json

and additionally the app crashes on startup saying it needs http2 and child_process. The problem now appears to be that at least child_process expects to be run in a node server context but React Native is browser-based so it is not compatible. It appears to be me that this version of the Hedera SDK is not supported in a React Native mobile application. Can someone please confirm? Has anyone successfully used the 2.0.11 Hedera JS-SDK in a React Native mobile app to communicate directly with Hedera nodes (not grpc proxy nodes)?

[janaakhterov]

Note, we are looking into this, but it isn't clear on how to fix this issue for react native. We have tried doing the simple task of adding ./package.json to the exports field with no luck. This will require further investigation.

[robkainz]

Note, we are looking into this, but it isn't clear on how to fix this issue for react native. We have tried doing the simple task of adding ./package.json to the exports field with no luck. This will require further investigation.

Any update on React Native support for the JS SDK? Is this the right issue to track for it?

[janaakhterov]

This is the right issue to track, but we haven't made much progress here unfortunately.

[janaakhterov]

@ShivaSunny9 I believe we've now fixed this issue with the release of v2.0.17-beta.6. I've tested this on my android phone though Expo -- which I think is the recommended way to build React Native projects -- and the SDK seems to load and run correctly now. I'm closing this issue, but if you continue to have trouble please reopen this issue.

[ShivaSunny9]

@danielakhterov when I tried to integrate on react-native CLI I am getting errors. can you just help me with your package.json file and if possible can you share the source code of the project which you have implemented js-sdk.

[robkainz]

I'm having issues too. I'm using a pure React Native project (no expo). After adding to my package.json file these: expo-auth-session, expo-crypto, expo-random I was able to get the Mnemonic.generate() function working as expected. However, the following code doesn't work (passphrase is set to an empty string):

const m = await Mnemonic.fromString(mnemonic);
console.log('mnemonicToPublicKey() - mnemonic: ', m)
let pk = await PrivateKey.fromMnemonic(m, passphrase);

Gives me the following error: undefined is not an object (evaluating '_utf.default.encode')

The output from the above is below.

[Mon Apr 26 2021 09:14:30.573] LOG mnemonicToPublicKey() - entry with mnemonic: plate planet identify coyote nice misery bleak repeat token dutch minute used
[Mon Apr 26 2021 09:14:30.574] LOG mnemonicToPublicKey() - mnemonic: {"_isLegacy": false, "words": ["plate", "planet", "identify", "coyote", "nice", "misery", "bleak", "repeat", "token", "dutch", "minute", "used"]}
[Mon Apr 26 2021 09:14:30.579] LOG error occurred
[Mon Apr 26 2021 09:14:30.579] LOG undefined is not an object (evaluating '_utf.default.encode')
[Mon Apr 26 2021 09:14:30.580] LOG [TypeError: undefined is not an object (evaluating '_utf.default.encode')]

To resolve the above issue, I applied the following patch (it seems to work):

diff --git a/node_modules/@hashgraph/cryptography/src/encoding/utf8.native.js b/node_modules/@hashgraph/cryptography/src/encoding/utf8.native.js
index d5958c1..ea5a974 100644
--- a/node_modules/@hashgraph/cryptography/src/encoding/utf8.native.js
+++ b/node_modules/@hashgraph/cryptography/src/encoding/utf8.native.js
@@ -1,5 +1,5 @@
-import utf8 from "@stablelib/utf8";
-
+// import utf8 from "@stablelib/utf8";
+const utf8 = require("@stablelib/utf8")
 /**
  * @param {Uint8Array} data
  * @returns {string}

Also just noticed the following when I start the server:

$ node node_modules/react-native/local-cli/cli.js start --reset-cache
warn Package @hashgraph/sdk has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /Users/robertkainz/Development/wallawallet-mobile/Ledgerama/node_modules/@hashgraph/sdk/package.json

[janaakhterov]

@ShivaSunny9
I've added the React Native project I have been using for testing here: https://github.com/hashgraph/hedera-sdk-js/tree/master/react-native-example I followed https://reactnative.dev/docs/environment-setup these instructions to get it running on my phone.

@robkainz
That's interesting, I've seen the undefined is not an object (evaluating '_utf.default.encode') error before when I was loading the @hashgraph/sdk, but I didn't received that error for the @hashgraph/cryptography package. Either way, I've added the same fix I did for the @hashgraph/sdk to @hashgraph/cryptography, and I hope this resolve your issue. If there is a chance can you try using the master branch directly to confirm the fix resolve your issue; otherwise you'll need to wait for the next release.

As for the Reason: Package subpath './package.json' is not defined by "exports" I did some searching and found react-native-community/cli#1168 which seems to be an issue with the react-native-cli rather than this package.

[robkainz]

@danielakhterov

I did try the master branch by including this in my package.json deps:

"@hashgraph/sdk": "hashgraph/hedera-sdk-js#master",

However, "yarn install" gave me this error:

MBPI9:Ledgerama robertkainz$ yarn install
yarn install v1.22.4
[1/4] 🔍  Resolving packages...
error Package "" refers to a non-existing file '"/Users/robertkainz/Development/wallawallet-mobile/Ledgerama/packages/cryptography"'.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

I then tried:

"@hashgraph/sdk": "file:./deps/hedera-sdk-js",

but got this error when running:

error: Error: Unable to resolve module ./proto.js from deps/hedera-sdk-js/packages/proto/src/index.js:

Can you help me with the config to test out your master branch?

If I do proceed with my patch, I get another error when Hedera tries to base64.decode() the response in NativeChannel.js. A response is retrieved, but decode() is called with undefined while passing responseData.split()[1] (I'm guessing split only returns one string, so undefined is there for index 1).

I'm not sure my patch is the correct fix though but it was based on my quick research that there are differences with ESM scripts (which use import) vs CJS scripts (which use require) from the following article: https://redfin.engineering/node-modules-at-war-why-commonjs-and-es-modules-cant-get-along-9617135eeca1

I tried many different configurations, including what I gleaned from your package.json from your react native project. I even tried using the whole expo library but mine is still a bare React Native project and I really need to get this working (as I want to avoid using my native golang implementation if at all possible as maintenance of the bridge code will be costly and painful.

[robkainz]

@danielakhterov @ShivaSunny9

Hey guys, I'm going to first try and get Daniel's example to run, and then build up the configuration so it matches mine to make sure the example still runs (keeping it bare React Native with a few select expo libraries.) But I'm not able to get the react-native-example to run.

It builds successfully and launches in the simulator, but the Hedera SDK calls do not complete successfully and I see the following in the simulator and the errors in the console. I tried the master branch (running it using "file:..") and also tried "2.0.17-beta.7". Both fail.

TransactionId: Waiting for data
AccountInfo.accountId: Waiting for data
Balance: Waiting for data
Random Mnemonic: Waiting for data

There appear to be two errors below (full console output follows):

TypeError: null is not an object (evaluating '_ExpoRandom.default.getRandomBytesAsync')
getRandomBytesAsync$

and

TypeError: undefined is not an object (evaluating 'asc.replace')

[Wed Apr 28 2021 17:19:29.230]  WARN     Possible Unhandled Promise Rejection (id: 0):
TypeError: null is not an object (evaluating '_ExpoRandom.default.getRandomBytesAsync')
getRandomBytesAsync$@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:126213:37
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29672:32
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29572:30
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29602:19
tryCallTwo@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4382:9
doResolve@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4546:25
Promise@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4405:14
callInvokeWithMethodAndArg@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29601:33
enqueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29606:157
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29623:69
getRandomBytesAsync@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:126206:38
bytesAsync@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:126163:38
_generate$@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:119626:68
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29672:32
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29572:30
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29602:19
tryCallTwo@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4382:9
doResolve@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4546:25
Promise@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4405:14
callInvokeWithMethodAndArg@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29601:33
enqueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29606:157
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29623:69
_generate@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:119598:42
generate12@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:119592:34
componentDidMount@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:114632:33
commitLifeCycles@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:24220:47
commitLayoutEffects@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:26480:29
invokeGuardedCallbackImpl@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:13701:21
invokeGuardedCallback@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:13795:42
commitRootImpl@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:26269:36
commitRootImpl@[native code]
unstable_runWithPriority@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:48413:30
commitRoot@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:26156:24
performSyncWorkOnRoot@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:25680:19
performSyncWorkOnRoot@[native code]
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:16952:38
unstable_runWithPriority@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:48413:30
flushSyncCallbackQueueImpl@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:16947:28
flushSyncCallbackQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:16936:35
scheduleUpdateOnFiber@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:25289:37
updateContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:27768:21
render@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:28202:24
renderApplication@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:75853:77
run@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:75427:28
runApplication@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:75480:28
__callFunction@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3690:36
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3422:31
__guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3644:15
callFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3421:21
callFunctionReturnFlushedQueue@[native code]
[Wed Apr 28 2021 17:19:29.301]  WARN     Possible Unhandled Promise Rejection (id: 1):
TypeError: undefined is not an object (evaluating 'asc.replace')
atobPolyfill@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:127264:16
decode@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:158988:45
_callee$@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:158773:49
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29672:32
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29572:30
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29582:21
tryCallOne@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4373:16
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4474:27
_callTimer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31522:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31561:17
callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31778:33
__callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3661:35
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3447:34
__guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3644:15
flushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3446:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]
[Wed Apr 28 2021 17:19:29.313]  WARN     Possible Unhandled Promise Rejection (id: 2):
TypeError: undefined is not an object (evaluating 'asc.replace')
atobPolyfill@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:127264:16
decode@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:158988:45
_callee$@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:158773:49
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29672:32
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29572:30
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29582:21
tryCallOne@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4373:16
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4474:27
_callTimer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31522:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31561:17
callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31778:33
__callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3661:35
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3447:34
__guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3644:15
flushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3446:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]
[Wed Apr 28 2021 17:19:29.442]  WARN     Possible Unhandled Promise Rejection (id: 3):
TypeError: undefined is not an object (evaluating 'asc.replace')
atobPolyfill@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:127264:16
decode@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:158988:45
_callee$@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:158773:49
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29672:32
tryCatch@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29499:23
invoke@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29572:30
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:29582:21
tryCallOne@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4373:16
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:4474:27
_callTimer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31522:17
_callImmediatesPass@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31561:17
callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:31778:33
__callImmediates@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3661:35
http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3447:34
__guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3644:15
flushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:3446:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

[ShivaSunny9]

@danielakhterov @robkainz I am trying to open the issue but I am not getting any option to open this issue again.

[robkainz]

@danielakhterov @robkainz Maybe we should open a new issue stating that we cannot get the react native example to run in the simulator. (In my case on IOS).