repack icon indicating copy to clipboard operation
repack copied to clipboard

RePack with rn_nodeify

Open vlack-coder opened this issue 1 year ago • 1 comments

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 avatar Apr 28 '24 07:04 vlack-coder

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

vlack-coder avatar Apr 28 '24 09:04 vlack-coder

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?

jbroma avatar May 08 '24 11:05 jbroma

This issue has been marked as stale because it has been inactive for 30 days. Please update this issue or it will be automatically closed in 14 days.

github-actions[bot] avatar Jun 08 '24 00:06 github-actions[bot]

This issue has been automatically closed because it has been inactive for more than 14 days. Please reopen if you want to add more context.

github-actions[bot] avatar Jun 23 '24 00:06 github-actions[bot]