Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native arguably does a resolve.alias equivalent a la webpack now #46

Open
pcowgill opened this issue Dec 31, 2019 · 15 comments
Open

Comments

@pcowgill
Copy link
Contributor

In the README, it says that "react-native doesn't currently have a resolve.alias a la webpack".

Would you say that the extraNodeModules setting in metro.config.js counts as similar enough feature that achieves what you need?

module.exports = {
  resolver: {
    extraNodeModules: {
      crypto: require('react-native-crypto'),
    },
  },
};

(Source)

@mvayngrib
Copy link
Member

@pcowgill i haven't experimented with it myself, but seems promising

@pcowgill
Copy link
Contributor Author

pcowgill commented Jan 5, 2020

@mvayngrib Cool, thanks for getting back to me! Would you like to experiment with it before accepting a PR that modifies this section in the README?

@mvayngrib
Copy link
Member

@pcowgill that would great, do u have an example repo?

@dnl-jst
Copy link

dnl-jst commented Jan 27, 2020

I installed react-native-crypto and react-native-randombytes:

yarn add react-native-crypto
yarn add react-native-randombytes

I skipped the linking of randombytes due to the autolinking feature of RN and added the extraNodeModules section like you suggested, @pcowgill

module.exports = {
  resolver: {
    extraNodeModules: {
      crypto: require('react-native-crypto'),
    },
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

Now i get the following error when trying to start the metro bundler:

error Unexpected token {. Run CLI with --verbose flag for more details.
/home/djost/projects/XXX/XXX/node_modules/react-native-crypto/index.js:3
import { randomBytes } from 'react-native-randombytes'
       ^

Any idea what I'm doing wrong?

I'm running [email protected].

Thank you!

@moughxyz
Copy link

I can confirm that extraNodeModules does the trick without any additional hacks:

  1. npm install --save-dev react-native-randombytes
  2. In metro.config.js, add this to exports:
  resolver: {
    extraNodeModules: {
      crypto: path.resolve(__dirname, 'extra_modules/crypto')
    },
  },
  1. Create file index.js in new extra_modules/crypto folder:
import { randomBytes } from 'react-native-randombytes';

exports.getRandomValues = function getRandomValues(arr) {
    let orig = arr;
    if (arr.byteLength !== arr.length) {
        // Get access to the underlying raw bytes
        arr = new Uint8Array(arr.buffer);
    }
    const bytes = randomBytes(arr.length);
    for (var i = 0; i < bytes.length; i++) {
        arr[i] = bytes[i];
    }

    return orig;
};
exports.randomBytes = exports.rng = exports.pseudoRandomBytes = exports.prng = randomBytes;
  1. In main project index.js, add:
global.crypto = require('crypto');

@pcowgill
Copy link
Contributor Author

pcowgill commented Mar 9, 2020

Thanks @mobitar!

@pcowgill
Copy link
Contributor Author

pcowgill commented Mar 9, 2020

@mvayngrib Is the example above enough evidence to justify updating the README? Thanks!

@ortonomy
Copy link

@mobitar -- this doesn't work. You still end up with an error:

image

and creates a require loop:

image

Is this really your solution? can you provide more information?

@mvayngrib
Copy link
Member

@ortonomy looks like you need to do cd iOS && pod install, then re-run the app. The require cycle is fine

@pcowgill sorry for the radio silence, I haven't had much time recently. I won't have time to experiment with this, but as @mobitar confirmed it works, i'm happy to accept a PR to the readme

@ortonomy
Copy link

@mvayngrib - I had already run npx pod-install

@mvayngrib
Copy link
Member

@ortonomy did u reinstall the app from xcode / react-native run-ios after that?

@ortonomy
Copy link

ortonomy commented Jul 19, 2020

@mvayngrib -- yes I did. I found a way to make this work without the need for @mobitar's complex solution. See here: philikon/ReactNativify#4 (comment)

module.exports = {
  resolver: {
    extraNodeModules: {
      // Polyfills for node libraries
      "crypto": require.resolve("react-native-crypto"),
    }
  },
  // other metro config, etc
}

is enough and that's it, it works in RN

require.resolve returns the full path to this lib, and creates a poly fill for the crypto lib that the metro bundler doesn't have issues with.

Suggest adding this to the README.md as the defacto way of aliasing/polyfilling crypto core in RN

@mvayngrib
Copy link
Member

is enough and that's it, it works in RN

@ortonomy do u have an example repo for the usage? I just tried the above and i get:

Unable to resolve module `stream` from `node_modules/cipher-base/index.js`: stream could not be found within the project.

@sckoh
Copy link

sckoh commented Jul 24, 2020

I have switched from rn-nodeify to https://github.com/parshap/node-libs-react-native for easier setup

@ortonomy
Copy link

@mvayngrib -- sorry it took me a bit to get round to this. Yes, I should have been more explicit. The method I used is good enough to get the node crypto lib shimmed / poly-filled, but you're going to have to do more work to get all the other node libs poly-filled. It's like turtles all the way down.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants