stripe-react-native: Expo managed workflow - crash on web

Let me make the steps explicit for the lazy folks like future me. (All credits to @robert-nash , in his previous answer.)

1. Add null-loader

   yarn add -D null-loader
   

2. Generate the webpack.config.js file with expo’s template:

   npx expo customize webpack.config.js
   

3. Modify webpack.config.js, add the line marked with the comment ADD THIS LINE. Final version of the file should look like:

   // webpack.config.js
   const createExpoWebpackConfigAsync = require('@expo/webpack-config');
   
   module.exports = async function (env, argv) {
   	const config = await createExpoWebpackConfigAsync(env, argv);
   	// Customize the config before returning it.
   	config.resolve.alias["@stripe/stripe-react-native"] = "null-loader"; // ADD THIS LINE
   	return config;
   };
   

I am still working through the first web build of my app but I seem to have got round this particular error for the meantime by adding null-loader as an alias for @stripe/stripe-react-native in my webpack config.

I added a webpack.config.js as described here and then modified it so it looks like this excerpt. I also installed the null-loader package.

webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  config.resolve.alias["@stripe/stripe-react-native"] = "null-loader";
  return config;
};

@olaurendeau, hello thank you for the suggestion! If you have time, can you explain more about the dependency injection container to abstract away the platform dependent components ?

hey guyzz for the stripe issue you can initially add null loader like this to resolve the TextInputState Error here is my webpackConfig.js file for adding alias and create a separate NullModuleloader file like this

I’m facing only this error:

Module not found: Can't resolve './RCTNetworking'
  16 | const EventTarget = require('event-target-shim');
  17 | const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
> 18 | const RCTNetworking = require('./RCTNetworking');
     |                      ^
  19 |
  20 | const base64 = require('base64-js');
  21 | const invariant = require('invariant');

Did you fix it mate ?

@anabeatrizzz

Facing this issue too, the fix posted by @robert-nash / @MehmetKaplan is not working for me.

@olaurendeau I have a workaround for now. I’ve implemented separate application entry points for mobile and web, with a basic dependency injection container to abstract away the platform dependent components. It’s not ideal, but it works.

No. All the errors were introduced when I added the Stripe library.