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

RePack with rn_nodeify #591

Open
vlack-coder opened this issue Apr 28, 2024 · 2 comments
Open

RePack with rn_nodeify #591

vlack-coder opened this issue Apr 28, 2024 · 2 comments
Labels

Comments

@vlack-coder
Copy link

vlack-coder commented Apr 28, 2024

Hi, I've been trying to add rn_nodeify library available in my rePack project but it's not working

What rn_nodeify does:

It provides your react-native project with core nodeJs modules

How it works:

It recurses down node_modules and modifies all the package.json's in node_modules to add/update the browser and react-native entry fields and it does it in the post-install script when yarn is ran

Adding rn_nodeify

After adding rn_nodeify, it adds only the library stated in the postinstall script -
"postinstall": "./node_modules/.bin/rn-nodeify --hack --install crypto,stream,process,events,vm-browserify",

which are the library needed for cryptoJs to work yielding the below

"dependencies": {
    "events": "^1.1.1",
    "process": "^0.11.10",
    "react": "18.2.0",
    "react-native": "0.72.5",
    "react-native-crypto": "^2.2.0",
    "react-native-randombytes": "^3.6.1",
    "readable-stream": "^1.0.33",
    "rn-nodeify": "^10.3.0",
    "stream-browserify": "^1.0.0",
    "vm-browserify": "^0.0.4"
  },

By default, it maps all these modules to the browser and react-native fields, In my case

  "react-native": {
    "crypto": "react-native-crypto",
    "_stream_transform": "readable-stream/transform",
    "_stream_readable": "readable-stream/readable",
    "_stream_writable": "readable-stream/writable",
    "_stream_duplex": "readable-stream/duplex",
    "_stream_passthrough": "readable-stream/passthrough",
    "stream": "stream-browserify"
  },
  "browser": {
    "crypto": "react-native-crypto",
    "_stream_transform": "readable-stream/transform",
    "_stream_readable": "readable-stream/readable",
    "_stream_writable": "readable-stream/writable",
    "_stream_duplex": "readable-stream/duplex",
    "_stream_passthrough": "readable-stream/passthrough",
    "stream": "stream-browserify"
  }

It also generates and adds shim.js to the root of the project which is in turn imported in the entry point of the project, index.js
Shim.js populates some necessary nodeJs module

if (typeof __filename === 'undefined') global.__filename = '';
if (typeof process === 'undefined') {
  global.process = require('process');
} else {
  const bProcess = require('process');
  for (var p in bProcess) {
    if (!(p in process)) {
      process[p] = bProcess[p];
    }
  }
}

process.browser = false;
if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer;

// global.location = global.location || { port: 80 }
const isDev = typeof __DEV__ === 'boolean' && __DEV__;
process.env['NODE_ENV'] = isDev ? 'development' : 'production';
if (typeof localStorage !== 'undefined') {
  localStorage.debug = isDev ? '*' : '';
}

Installation Aftermath

After all the above steps, it works perfectly with metro but with repack, fistly I had to edit webpack config because I got an invariant cannot be resolved in all the modules, react native included
image

image

After adding this, that error was resolved

      modules: [
        path.resolve(dirname, 'node_modules'),
        'node_modules',
        'invariant',
        'browserify-sign',
      ],

Latly, in the shim.js, I cannot log the process library but I can log its typeof which is an object (ehereas in metro I can do both)
Also I removed this -
process.env['NODE_ENV'] = isDev ? 'development' : 'production'
because I was getting lefthand side assignment error probably because process.env['NODE_ENV'] was likely undefined

Everything works fine with metro but not repack, please any suggestion on what I can I do. Thanks

I also tried everything under this issue to no avail - Issue 296

@vlack-coder
Copy link
Author

vlack-coder commented Apr 28, 2024

This is a reproducible repo for the rn_nodeify implementation which includes =>

  • A fresh installation of react native v 0.72.5 with repack integrated
  • rn_nodeify installed with a post install script to install only the nodeJs modules needed
  • and encryption and decryption code with its use

https://github.com/vlack-coder/nodifypack
To run with webpack
yarn start
To run with metro
yarn starter

@jbroma
Copy link
Member

jbroma commented May 8, 2024

Hi @vlack-coder,

I'll take a look at this when I have some spare time, since it's using rn_nodeify it's a very low priority.

May I ask what do you need it for?

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

No branches or pull requests

2 participants