Use stream-browserify with expo

Question

stream cannot be used with expo, as it is a Node.js standard package. However, the package stream-browserify can be used as an alternative in those scenarios.

In order to make modules resolve this instead of the native Node package, I am trying to make babel-plugin-require-rewrite work with expo.

I am adding this to babel.config.js:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ["rewrite-require", { aliases: {
        "stream": "stream-browserify"
      }}]
    ]
  };
};

Unfortunately, it is not respected by the bundler. I get this error when trying:

The package at "node_modules\qr-image\lib\qr.js" attempted to import the Node standard library module "stream". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo

Is it possible to make this work in Expo?

Answer 1

You dont need to modify babel config to use stream-browserify in your source. You can import stream-browserify in your App.js. I have created a simple example on GitHub.

App.js

const Stream = require('stream-browserify');

Package.json

  "dependencies": {
    "buffer": "^5.2.1",
    "events": "^3.0.0",
    "stream-browserify": "^2.0.2",
    "readable-stream": {
      "version": "2.3.6",
      "dependencies": {
        "core-util-is": "github:mjmasn/core-util-is"
      }
    }
    ...
  }

stream-browserify has dependency readable-stream which has its own dependency and use node environment. To resolve it you have to add these node packages. You can read about core-util-is fork here.

Answer 2

This answer rn-nodeify install that i have posted should work. Except Step 1 & Step 5 follow all steps. Step 3 is used for adding node packages you are specifically looking to install, in this case specify stream. Please do modifications in Step 4 based on your requirement in Step 3.

Please do comment if you want me to elaborate.

Answer 3

What ended up working for me was creating a metro.config.js file with the following content (I used readable-stream instead of stream-browserify, but I think either should work):

module.exports = {
    resolver: {
        extraNodeModules: {
            stream: require.resolve('readable-stream'),
        },
    },
};

And then I just used yarn add readable-stream and this allows dependencies to use readable-stream as if it were stream.

This was based on the info I found here: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd#file-node-modules-in-react-native-md