msw: React Native support is broken

This code was taken directly from the React Native GraphQL branch in the examples repository (https://github.com/mswjs/examples/tree/examples/gql-react-native/examples/graphql-react-native-apollo). I’ve been unable to get that to work at all for other reasons, so I thought I’d create a new repository using the latest versions of everything to demonstrate the error I’m receiving.

https://github.com/wwdrew/mswjs-react-native-failing

Environment

Name	Version
msw	0.27.0
browser	n/a
react-native	0.63.4
OS	MacOS 11.2.1

Current behavior

Metro crashes with this stack trace:

error: Error: Unable to resolve module os from <obscured>/AnotherTest/node_modules/msw/native/lib/index.js: os could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
  4 |
  5 | var XMLHttpRequest = require('node-request-interceptor/lib/interceptors/XMLHttpRequest');
> 6 | var os = require('os');
    |                   ^
  7 | var tty = require('tty');
  8 | var events_1 = require('events');
  9 | var nodeRequestInterceptor = require('node-request-interceptor');

Expected behavior

Expecting the API call to be successful and not crash the bundler.

Screenshots

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 7
Comments: 15 (12 by maintainers)

Most upvoted comments

I’ve had a bit more time this evening to work on this and have managed to get it working a little further, but with some big caveats.

First of all, in order to import ‘events’ I’ve had to install the ‘events’ package, otherwise it fails trying to load that package. This is only used in StrictEventEmitter, I haven’t tracked down where this is imported so I’m not sure yet how to overcome this one. Since it’s referring to EventEmitter, I’m hoping I can change the import to bring in the RN version rather than going through the events package. If someone out there has any suggestions on this I’d be really happy to hear them.

The next problem is the usage of ‘url’ in the getPublicUrlFromRequest function. Just as a hack I’ve removed the function call to ‘format’ entirely and there are no more runtime errors - result, again! However, the call now fails with a ‘Network request failed’. According to the TS annotations the format function is deprecated anyway and should probably be updated, but that still won’t solve the missing ‘url’ package. Again, not sure how to overcome this one.

I do have some good news though, I’ve added ‘chalk’ to the list of external modules in the rollup config and it’s cleared up the ‘tty’ and ‘os’ imports.

Hopefully someone else out there has some ideas on how to fix these issues?

wwdrew on Mar 10, 2021

Really nice work @wwdrew !!

jorgemasta on Jul 12, 2021

@wwdrew not to step on your toes, but I’ve opened mswjs/examples#60 with a Rest React Native example.

taylorkline on Jul 18, 2021

A gigantic thank you to @wwdrew for fixing React Native compatibility issues! The fix has been released in 0.31.0 and should enable React Native support back.

Please, @wwdrew, would you have some time to set up a React Native usage example in the examples repository? That’d help us catch any regressions, as all those examples are also smoke tests for MSW.

kettanaito on Jul 9, 2021

Yep, it turns out there’s no need to update the cookie store at all. The update to the cookies package is all that was needed.

wwdrew on Jul 9, 2021

Actually, it turns out solving the last step was actually really easy.

@mswjs/cookies @0.1.6 has changed how it checks for whether localStorage exists, which is compatible with React Native. After testing it on my local setup (with the two patches I’ve submitted above) it’s now working.

I’ve submitted a third PR that solves the last hurdle for React Native support.

wwdrew on Jul 8, 2021