Import the polkadot-api in React-Native, The error summary #481

0xthreebody · 2018-12-17T11:48:46Z

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

The text was updated successfully, but these errors were encountered:

jacogr · 2018-12-17T11:55:37Z

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.

jacogr · 2018-12-17T21:18:40Z

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')
    );
  }
}

0xthreebody · 2018-12-18T05:32:55Z

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",

0xthreebody · 2018-12-18T06:48:23Z

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:

jacogr · 2018-12-18T07:30:13Z

The color/chalk we can remove, it only gets used in the client repo really.

0xthreebody · 2018-12-18T08:20:54Z

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

0xthreebody · 2018-12-18T08:24:21Z

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>
    .....

0xthreebody · 2018-12-18T11:55:44Z

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.

0xthreebody · 2018-12-18T13:27:02Z

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
``

452MJ · 2019-11-14T10:16:32Z

Unable to resolve module util from node_modules/@polkadot/util/polyfill/textDecoder.js: util could not be found within the project.

452MJ · 2019-11-14T10:19:34Z

452MJ · 2019-11-15T05:50:30Z

I fix it follow the repo https://github.com/jacogr/pjs-rn-rncli.

polkadot-js-bot · 2021-06-05T01:57:40Z

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.

jacogr added Bug Tracks issues causing errors or unintended behavior, critical to fix for reliability. @api labels Dec 17, 2018

This was referenced Dec 17, 2018

core-js as an explicit dependency polkadot-js/common#272

Merged

Add explicit core-js dep (& bump common) #485

Merged

0xthreebody changed the title ~~error: bundling failed: Error: Unable to resolve module core-js/modules/es6.regexp.to-string~~ Import the polkadot-api in React-Native, The error summary Dec 18, 2018

jacogr mentioned this issue Dec 18, 2018

Polyfills for RN support polkadot-js/common#275

Merged

This was referenced Dec 19, 2018

Remove circular imports from types #492

Merged

Method -> Extrinsic circular dep #495

Merged

0xthreebody closed this as completed Dec 24, 2018

0xthreebody mentioned this issue Jan 5, 2019

Mobile wallet for Polkadot. - Polkawallet w3f/General-Grants-Program#59

Closed

12 tasks

polkadot-js locked as resolved and limited conversation to collaborators Jun 5, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Import the polkadot-api in React-Native, The error summary #481

Import the polkadot-api in React-Native, The error summary #481

0xthreebody commented Dec 17, 2018 •

edited

Loading

jacogr commented Dec 17, 2018 •

edited

Loading

jacogr commented Dec 17, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading

jacogr commented Dec 18, 2018

0xthreebody commented Dec 18, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018

452MJ commented Nov 14, 2019

452MJ commented Nov 14, 2019

452MJ commented Nov 15, 2019

polkadot-js-bot commented Jun 5, 2021

Import the polkadot-api in React-Native, The error summary #481

Import the polkadot-api in React-Native, The error summary #481

Comments

0xthreebody commented Dec 17, 2018 • edited Loading

jacogr commented Dec 17, 2018 • edited Loading

jacogr commented Dec 17, 2018 • edited Loading

0xthreebody commented Dec 18, 2018 • edited Loading

0xthreebody commented Dec 18, 2018 • edited Loading

jacogr commented Dec 18, 2018

0xthreebody commented Dec 18, 2018 • edited Loading

0xthreebody commented Dec 18, 2018 • edited Loading

0xthreebody commented Dec 18, 2018 • edited Loading

0xthreebody commented Dec 18, 2018

452MJ commented Nov 14, 2019

452MJ commented Nov 14, 2019

452MJ commented Nov 15, 2019

polkadot-js-bot commented Jun 5, 2021

0xthreebody commented Dec 17, 2018 •

edited

Loading

jacogr commented Dec 17, 2018 •

edited

Loading

jacogr commented Dec 17, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading

0xthreebody commented Dec 18, 2018 •

edited

Loading