Import the polkadot-api in React-Native, The error summary
0xthreebody opened this issue · comments
polkadot Api version :
"@polkadot/api": "^0.33.17",
"@polkadot/rpc-provider": "^0.33.17"
This React-Native project create way is :
react-native init Project
cd Project
react-native run-android
packages:
"dependencies": {
"axios": "0.18.0",
"ethers": "3.0.27",
"identicon.js": "2.3.2",
"mobx": "^4.3.1",
"mobx-react": "5.2.5",
"moment": "2.22.2",
"react": "16.4.2",
"react-native": "0.56.0",
"react-native-camera": "1.2.0",
"react-native-modal": "6.5.0",
"react-native-permissions": "1.1.1",
"react-native-qrcode-svg": "5.1.0",
"react-native-sensitive-info": "5.2.4",
"react-native-snackbar": "0.5.0",
"react-native-svg": "6.5.2",
"react-native-vector-icons": "5.0.0",
"react-navigation": "2.12.1",
"@polkadot/api": "^0.33.17",
"@polkadot/rpc-provider": "^0.33.17"
},
"devDependencies": {
"@babel/core": "7.0.0-beta.47",
"@babel/plugin-proposal-decorators": "7.0.0-beta.47",
"@babel/plugin-transform-runtime": "7.0.0-beta.47",
"@babel/runtime": "7.0.0-beta.47",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "23.4.2",
"babel-plugin-module-resolver": "3.1.1",
"babel-preset-react-native": "5.0.2",
"enzyme": "3.5.0",
"enzyme-adapter-react-16": "1.3.0",
"eslint-config-rallycoding": "3.2.0",
"jest": "23.5.0",
"jsdom": "12.0.0",
"react-native-mock-render": "0.1.1",
"react-test-renderer": "16.4.2",
"rimraf": "^2.6.2"
},
When I import the @polkadot/api to React Native project. get the error:
error: bundling failed: Error: Unable to resolve module `core-js/modules/es6.regexp.to-string` from `/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js`: Module `core-js/modules/es6.regexp.to-string` 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-*`.
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false
Body:
{"originModulePath":"/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js","targetModuleName":"core-js/modules/es6.regexp.to-string","message":"Unable to resolve module `core-js/modules/es6.regexp.to-string` from `/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js`: Module `core-js/modules/es6.regexp.to-string` does not exist in the Haste module map\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 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-*`.","errors":[{"description":"Unable to resolve module `core-js/modules/es6.regexp.to-string` from `/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js`: Module `core-js/modules/es6.regexp.to-string` does not exist in the Haste module map\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 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-*`."}],"name":"Error","stack":"Error: Unable to resolve module `core-js/modules/es6.regexp.to-string` from `/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/@polkadot/util/logger.js`: Module `core-js/modules/es6.regexp.to-string` does not exist in the Haste module map\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 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-*`.\n at ModuleResolver.resolveDependency (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:167:1306)\n at ResolutionRequest.resolveDependency (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:80:16)\n at DependencyGraph.resolveDependency (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)\n at Object.resolve (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/lib/transformHelpers.js:116:25)\n at dependencies.map.result (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)\n at Array.map (<anonymous>)\n at resolveDependencies (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)\n at /media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33\n at Generator.next (<anonymous>)\n at step (/media/threebody/DATA/Desktop/github/ethereum-wallet/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)"}
processBundleResult
BundleDownloader.java:285
access$200
BundleDownloader.java:37
onResponse
BundleDownloader.java:163
execute
RealCall.java:153
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1162
run
ThreadPoolExecutor.java:636
run
Thread.java:764
This seems to be a babel 7.2 (as used by API) vs 7-beta issue. We really want these to just work without tweaking, so need to investigate.
EDIT: After reading quite a bit, between the beta and release, things have changed a bit. The recommended solution is to add core-js as an explicit dependency (common & api to follow). Manually adding core-js as a dep seems to do the trick, so it needs to go in.
Ok, with the above 2 PRs, the initial issues are resolved as of ^0.33.35 onwards. (Some playing in-between trying various options, hence skipping a couple of patch versions along the way)
This includes the original core-js issue and the TextEncoder/Decoder issue. However, it is still not operational on RN as of yet, the environment has some peculiarities. Not out of the woods.
The basic approach is to find the module, a replacement for it on npm, install test. Next issue. (The way RN bundles info from Node-components is very different from the way it does it for the browser, hence having to provide replacements.) This seems to work, by including buffer, util and then we get to "stream"...
Feeling like hitting a brick wall after some iterations over stream and then found this - https://www.npmjs.com/package/node-libs-react-native - it aims to solve exactly the issue we are facing after the initial updates. (I have not yet tried it locally, but it will be the next step to get a sane RN version going).
The App I'm testing is really simple, not great, not useful, but indicates the issues -
export default class App extends React.Component {
constructor (props) {
super(props);
this.createApi();
}
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
async createApi () {
this.api = await ApiPromise.create();
api.rpc.chain.subscribeNewBlock((block) =>
block && console.log('block #${block.blockNumber')
);
}
}
Now, this is error is resolved,
I add "node-libs-react-native": "^1.0.3" , and the "@babel/xxxxxxx": "7.0.0-beta.47" without ^ (if have the "^", will get another error about the version),
now my packages :
"dependencies": {
"@polkadot/api": "^0.33.25",
"@polkadot/rpc-provider": "^0.33.25",
"@polkadot/rpc-core": "^0.33.25",
"axios": "0.18.0",
"core-js": "^2.6.0",
"ethers": "3.0.27",
"identicon.js": "2.3.2",
"mobx": "^4.3.1",
"mobx-react": "5.2.5",
"moment": "2.22.2",
"node-libs-react-native": "^1.0.3",
"react": "16.6.3",
"react-native": "0.56.0",
"react-native-camera": "1.2.0",
"react-native-modal": "6.5.0",
"react-native-permissions": "1.1.1",
"react-native-qrcode-svg": "5.1.0",
"react-native-sensitive-info": "5.2.4",
"react-native-snackbar": "0.5.0",
"react-native-svg": "6.5.2",
"react-native-vector-icons": "5.0.0",
"react-navigation": "2.12.1"
},
"devDependencies": {
"@babel/core": "^7.2.0",
"@babel/plugin-proposal-decorators": "7.0.0-beta.47",
"@babel/plugin-transform-runtime": "7.0.0-beta.47",
"@babel/runtime": "7.0.0-beta.47",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "23.4.2",
"babel-plugin-module-resolver": "3.1.1",
"babel-preset-react-native": "5.0.2",
"enzyme": "3.5.0",
"enzyme-adapter-react-16": "1.3.0",
"eslint-config-rallycoding": "3.2.0",
"jest": "23.5.0",
"jsdom": "12.0.0",
"react-native-mock-render": "0.1.1",
"react-test-renderer": "16.4.2",
"rimraf": "^2.6.2",
"@polkadot/dev": "^0.22.12",
"@polkadot/ts": "^0.1.43"
},
But, got another error about "chalk", I am solving it, now. :
undefined is not a function (evaluating 'Object.setPrototypeOf(chalk, Chalk.prototype)')
Chalk
index.js:39:24
<unknown>
index.js:226:17
loadModuleImplementation
require.js:237:12
guardedLoadModule
require.js:168:36
metroRequire
require.js:152:20
<unknown>
logger.js:17:36
loadModuleImplementation
......
The polkadot Api v0.33.25, used the "chalk": "^2.4.1",
API feedback color is not needed for the time being, so I removed "chalk" temporarily. Record, solve in the future.
Then got an new error:
The color/chalk we can remove, it only gets used in the client repo really.
undefined is not a function (evaluating '()type.toUpperCase() + ":").padStart(16)')
Solution for now is:
Polkadot Api file change:
/node_modules/@polkadot/util/logger.js
import _ from "lodash";
const type = _.padStart(`${_type.toUpperCase()}:`,16);
/node_modules/@polkadot/dev/scripts/polkadot-dev-yarn-only.js
import _ from "lodash";
const blank = _.padStart('',75);
Reference : facebook/react-native#18375
Then, Got another issue:
Super expression must either be null or a function
_wrapNativeSuper
wrapNativeSuper.js:16:26
_wrapNativeSuper
wrapNativeSuper.js:40:26
<unknown>
UInt.js:1
loadModuleImplementation
require.js:237:12
guardedLoadModule
require.js:168:36
metroRequire
require.js:152:20
<unknown>
.....
When to import the @polkadot/keyring have the issue:BASE_MAP.fill(255)
My base-x version: 3.0.5
change the code of: node_moduls/base-x.index.js:13
// BASE_MAP.fill(255)
for(let i=0; i < BASE_MAP.length;i++) {
BASE_MAP[i] = 255
}
There is only one temporary way.
import @polkadot/ts, got the error:
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false
Body:
{"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error, please check your terminal error output for more details"}
processBundleResult
BundleDownloader.java:285
access$200
BundleDownloader.java:37
onResponse
BundleDownloader.java:163
execute
RealCall.java:153
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1162
run
ThreadPoolExecutor.java:636
run
Thread.java:764
``
Unable to resolve module util from node_modules/@polkadot/util/polyfill/textDecoder.js: util could not be found within the project.
I fix it follow the repo https://github.com/jacogr/pjs-rn-rncli.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue if you think you have a related problem or query.