React Native: Property 'Document' doesn't exist

[rodperottoni]

I'm currently using [email protected] on Expo SDK 51. When calling .listen() on my server instance, all requests start failing with the following error:

[ReferenceError: Property 'Document' doesn't exist]

• My setupServer is indeed imported from msw/native.
• My polyfills are correctly set up

After digging around, I found out the latest XMLHttpRequestInterceptor makes use of the global Document property, which is not available on React Native or Expo applications.

The usage can be seen here: XMLHttpRequestController.ts

I'm wondering if anyone else has faced this issue and how did they solve it?

[rodperottoni]

Some more information:

• I've placed several console.logs around the compiled MSW code, and found out that the imported XMLHttpRequestInterceptor somehow is resolved to the browser variant under @mswjs/interceptors.

---

• I can confirm this by placing logs in the following file: node_modules/@mswjs/interceptors/lib/browser/interceptors/XMLHttpRequest/index.js

---

Output:

• This is how I'm setting up my server:

---

Relevant packages:

• [email protected]
• [email protected]
• [email protected]
• [email protected]

[rodperottoni]

I think I just found my answer.

In Expo's metro config, the config.resolver.resolverMainFields has a default value of: https://github.com/expo/expo/blob/58c7c9156e86dab9e3f2f15135e52f03880b6cf3/packages/%40expo/metro-config/src/ExpoMetroConfig.ts#L262

For reference, this is Metro's docs on resolverMainFields: https://metrobundler.dev/docs/configuration/#resolvermainfields

This makes me wonder: how did anyone else ever got MSW to work with React Native + Expo if the module resolution is using the browser exports rather than node ?